<template>
  <div class="hello" style="overflow: hidden">
    <!-- <div
      id="network topology chart"
      style="
        position: fixed;
        background-color: aqua;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 9999;
        right: 0;
      "
    ></div> -->
    <div
      v-show="showAtom"
      id="atom"
      style="
        position: fixed;
        background-color: aqua;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 9999;
        right: 0;
      "
    >
      <div
        style="
          width: 400px;
          position: fixed;
          top: 180px;
          left: 50px;
          color: #000;
          padding: 10px;
        "
      >
        <div class="feature-description">
          <h3>拓扑管理模块功能说明</h3>
          <p>
            1.
            原子拓扑管理：实现增删改，依专业数据生成，管控版本，可视化编辑SQL脚本自定义查询。
          </p>
          <p>
            2.
            拼装拓扑管理：实现场景化拓扑增删改，可视化调整组装逻辑，管控版本。
          </p>
          <p>
            3.
            拓扑低代码设计：低代码编排原子拓扑构建拼装拓扑，设计图样式（点、线颜色/图标等），实现拓扑
            - 图库、性能 - 时序库实时融合计算。
          </p>
          <p>
            4.
            拓扑集合管理：分类查询原子（区分资源/网络侧，按专业展示）、拼装拓扑（区分网络/业务连接图）；开放原子与拼装拓扑能力（接口
            + 页面），监控开放能力并多维度统计。
          </p>
          <p>
            5.
            拓扑全局检索：统一入口，按设备名/类型检索，选展示层级，结果页实现分析操作；跨专业融合拓扑渲染响应＜2秒，保障访问效率。
          </p>
        </div>
      </div>
      <div class="close" @click="showAtom = false">返回</div>
      <!-- <TelephoneNetworkTwin/> -->
    </div>
    <!-- <ContentPagedeom /> -->
    <div :style="{ opacity: rightOpacity }" class="box">
      <div class="title-img">
        <img src="static/title.png" alt="" />
      </div>
    </div>
    <div
      :style="{ opacity: rightOpacity }"
      v-show="statusCity == 1"
      :class="['right-group']"
    >
      <div
        @click="onClickFloor('LC14')"
        class="list-item"
        @mousemove="onmousemove(1, 'LC14')"
        @mouseleave="onmouseleave"
      >
        <div class="text" style="cursor: pointer">计算机机房</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/计算机机房.png'"
            :duration="iconPlay[0]"
          />
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 1 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 1 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 1 ? true : false" />
        </div>
      </div>
      <div
        class="list-item"
        @mousemove="onmousemove(2, 'LC13')"
        @mouseleave="onmouseleave"
      >
        <div class="text">电话机房</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/电话机房.png'"
              :duration="iconPlay[1]"
            />
          </div>
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 2 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 2 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 2 ? true : false" />
        </div>
      </div>
      <div
        class="list-item"
        @mousemove="onmousemove(3, 'LC12')"
        @mouseleave="onmouseleave"
      >
        <div class="text">传输机房</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/传输机房.png'"
              :duration="iconPlay[2]"
            />
          </div>
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 3 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 3 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 3 ? true : false" />
        </div>
      </div>
      <div
        class="list-item"
        @mousemove="onmousemove(4, 'LC11')"
        @mouseleave="onmouseleave"
      >
        <div class="text">电源电站</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/电源电站.png'"
              :duration="iconPlay[4]"
            />
          </div>
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 4 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 4 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 4 ? true : false" />
        </div>
      </div>
      <div
        class="list-item"
        @mousemove="onmousemove(5, 'LC10')"
        @mouseleave="onmouseleave"
      >
        <div class="text">网络接入机房</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/XX机房.png'"
              :duration="iconPlay[5]"
            />
          </div>
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 5 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 5 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 5 ? true : false" />
        </div>
      </div>
      <div
        class="list-item"
        @mousemove="onmousemove(6, 'LC09')"
        @mouseleave="onmouseleave"
      >
        <div class="text">安全设备机房</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/XX机房.png'"
              :duration="iconPlay[6]"
            />
          </div>
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 6 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 6 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 6 ? true : false" />
        </div>
      </div>
      <div
        class="list-item"
        @mousemove="onmousemove(7, 'LC08')"
        @mouseleave="onmouseleave"
      >
        <div class="text">存储设备机房</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/XX机房.png'"
              :duration="iconPlay[7]"
            />
          </div>
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 7 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 7 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 7 ? true : false" />
        </div>
      </div>
      <div
        class="list-item"
        @mousemove="onmousemove(8, 'LC07')"
        @mouseleave="onmouseleave"
      >
        <div class="text">核心交换机机房</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/XX机房.png'"
              :duration="iconPlay[8]"
            />
          </div>
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 8 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 8 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 8 ? true : false" />
        </div>
      </div>
      <div
        class="list-item"
        @mousemove="onmousemove(9, 'LC06')"
        @mouseleave="onmouseleave"
      >
        <div class="text">数据处理机房</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/XX机房.png'"
              :duration="iconPlay[9]"
            />
          </div>
        </div>
        <div
          :class="[
            'item-Popups',
            isShow == 9 ? 'width-Popups-i' : 'width-Popups-o',
          ]"
          :style="{ opacity: isShow == 9 ? 1 : 0 }"
        >
          <EChartsPieChart v-if="isShow == 9 ? true : false" />
        </div>
      </div>
      <div
        @click="clickGuanwang"
        class="list-item"
        @mousemove="onmousemove(10, 'LC05')"
        @mouseleave="onmouseleave"
      >
        <div class="text" style="cursor: pointer">地下管网</div>
        <div class="icon">
          <div class="icon">
            <VerticalCarousel
              :image-urls="'static/地下管网.png'"
              :duration="iconPlay[10]"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 楼层页 -->
    <div v-if="statusCity == 2" class="ComputerRoom">
      <div class="list-item">
        <div class="text">计算机机房</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/计算机机房.png'"
            :duration="iconPlay[0]"
          />
        </div>
      </div>
      <ContentPage
        @lighting-MouseLeave="lightingMouseLeave"
        @lighting-MouseEnter="lightingMouseEnter"
        @load-MouseLeave="loadMouseLeave"
        @load-MouseEnter="loadMouseEnter"
        @guangDian-MouseLeave="guangDianMouseLeave"
        @guangDian-MouseEnter="guangDianMouseEnter"
        @click-load="statusCity = 11"
        @click-lighting="statusCity = 12"
        @click-server="clickServer"
        @click-equipment="clickEquipment"
        @click-xunJian="xunJian"
        @click-JianKong="JianKong"
        @click-setShowAtom="setShowAtom"
        @go-handleNodeSelected="clickServerRed"
        @click-Computer="clickComputer"
        @handleMouseEnter="onMouseEnter"
        @handleMouseLeave="onMouseLeave"
        @dongLi-MouseLeave="dongLiMouseLeave"
        @dongLi-MouseEnter="dongLiMouseEnter"
        :style="{ right: `${nengHao1}%` }"
      />
      <div class="nengHao-group">
        <div
          v-show="!xunJianData && !showMonitorCards"
          class="content"
          style="
            width: 300px;
            position: fixed;
            top: 180px;
            left: 50px;
            border: 1px solid #fff;
            color: #fff;
            padding: 10px;
          "
        >
          <!-- <h5>内容</h5> -->
          <p>
            1.系统实现对机房内部机柜、设备进行 1:1
            精准比例建模，实际操作中能轻松应对大规模机房场景，管理机柜数量可达
            800 个以上，无论是大型数据中心还是复杂机房架构，都能完美适配。
          </p>
          <p style="margin-top: 20px">
            2.根据客户网络中心数据，结合实际使用需求，具备网络孪生模型中涉及到的2类典型数据的实时融合计算
          </p>
        </div>
        <!-- <div class="list-nengHao" @click="onClickHost('JZ001')" :style="{ right: `${nengHao1}%` }"><img
            src="static/实时能耗.png" alt=""></div>
        <div class="list-nengHao" :style="{ right: `${nengHao2}%` }"><img src="static/实时能耗.png" alt=""></div>
        <div class="list-nengHao" :style="{ right: `${nengHao3}%` }"><img src="static/实时能耗.png" alt=""></div> -->
        <!-- <div class="list-nengHao"><img src="static/实时能耗.png" alt=""></div> -->
      </div>
      <button
        v-show="!showAtom"
        @click="goCity"
        class="goCity"
        style="z-index: 10000"
      >
        返回
      </button>
    </div>
    <!-- 计算机网 -->
    <div v-if="statusCity == 3" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">计算机网</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/计算机机房.png'"
            :duration="iconPlay[0]"
          />
        </div>
      </div>
      <ContentPagejf @click-server="clickServer" />
      <!-- <div
        class="content"
        style="
          width: 300px;
          height: 60vh;
          position: fixed;
          top: 180px;
          left: 50px;
          border: 1px solid #fff;
          color: #fff;
        "
      >
        <h5>内容</h5>
      </div> -->
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 服务器页 -->
    <div v-if="statusCity == 4" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">服务器</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/iconjz.png'"
            :duration="iconPlay[0]"
          />
        </div>
      </div>
      <div class="box-item"></div>
      <!-- <ContentPage /> -->
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 矩阵页 -->
    <div v-if="statusCity == 5" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">矩阵</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/iconjz.png'"
            :duration="iconPlay[0]"
          />
        </div>
      </div>
      <div class="box-item"></div>
      <!-- <ContentPage /> -->
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 机柜页 -->
    <div v-if="statusCity == 6" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">机柜 1-1</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/iconjg.png'"
            :duration="iconPlay[1]"
          />
        </div>
      </div>
      <div class="box-item"></div>
      <!-- <ContentPage /> -->
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 单元页 -->
    <div v-if="statusCity == 7" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">单元</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/icondy.png'"
            :duration="iconPlay[2]"
          />
        </div>
      </div>
      <div class="box-item"></div>
      <div class="baojing-Xingxi">
        <!-- <GaoJingPage/> -->
        <img v-show="DanYuanId == 1101" src="static/告警通知.png" alt="" />
        <img v-show="DanYuanId != 1101" src="static/正常信息.png" alt="" />
      </div>
      <!-- <ContentPage /> -->
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 动环设备 -->
    <div v-if="statusCity == 8" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">动环设备</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/icondy.png'"
            :duration="iconPlay[2]"
          />
        </div>
      </div>
      <img
        style="width: 450px; position: absolute; left: 0"
        src="static/dhsb.png"
        alt=""
      />
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 监控设备 -->
    <div v-if="statusCity == 10" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">监控设备</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/icondy.png'"
            :duration="iconPlay[2]"
          />
        </div>
      </div>
      <!-- <img
        style="width: 450px; position: absolute; left: 0"
        src="static/dhsb.png"
        alt=""
      /> -->
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 载荷分布 -->
    <div v-if="statusCity == 11" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">载荷分布</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/icondy.png'"
            :duration="iconPlay[2]"
          />
        </div>
      </div>
      <div
        class="content"
        style="
          width: 300px;
          position: fixed;
          top: 180px;
          left: 50px;
          border: 1px solid #fff;
          color: #fff;
          padding: 10px;
        "
      >
        <!-- <h5>内容</h5> -->
        <p>
          1.系统具备以下功能：<br />
          一是实现从机房到分区、到机柜的多层次U位、承重与功耗分类统计分析；<br />二是可对机房机柜空间分布进行可视化渲染；<br />三是能呈现机柜功率三维分布情况；<br />四是在指定范围内，按U位、承重、功耗需求自动搜索查询空间。这些功能可有效提升数据中心运维效率，优化资源管理，助力高效运营。。
        </p>
      </div>
      <!-- <img
        style="width: 450px; position: absolute; left: 0"
        src="static/dhsb.png"
        alt=""
      /> -->
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 灯光 -->
    <div v-if="statusCity == 12" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">照明系统</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/icondy.png'"
            :duration="iconPlay[2]"
          />
        </div>
      </div>
      <EChartsPieChartLight />
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 地下管网页 -->
    <div v-if="statusCity == 9" class="ComputerRoom">
      <div class="list-item" style="padding: 0">
        <div class="text">地下管网</div>
        <div class="icon">
          <VerticalCarousel
            :image-urls="'static/地下管网.png'"
            :duration="iconPlay[2]"
          />
        </div>
      </div>
      <div class="box-item"></div>

      <div class="manhole-legend">
        <button v-if="!InspectionSwitches" @click="goInspectPipelines">
          巡检模式
        </button>
        <!-- 在管网页面或其他需要的地方添加 -->
        <button
          @click="endInspection"
          v-if="statusCity === 9 && InspectionSwitches"
        >
          结束巡检
        </button>
        <button @click="goPrevWell" :disabled="currentPointIndex === 0">
          上一个
        </button>
        <button
          @click="goNextWell"
          :disabled="
            currentPointIndex === inspectionPoints.length - 1 ||
            !InspectionSwitches
          "
        >
          下一个
        </button>
        <div
          v-for="(item, index) in legendData"
          :key="index"
          class="legend-item"
        >
          <img :src="item.imageUrl" :alt="item.name" class="legend-image" />
          <div class="legend-details">
            <p><strong>规格：</strong>{{ item.size }}</p>
            <p><strong>数量：</strong>{{ item.count }}</p>
          </div>
        </div>
      </div>
      <!-- <ContentPage /> -->
      <button @click="goCity" class="goCity" style="z-index: 10000">
        返回
      </button>
    </div>
    <!-- 列表模块 1-->
    <div v-if="statusTree" class="tree">
      <FuzzyTreeSearch @node-selected="handleNodeSelected" />
    </div>
    <div
      v-if="selectedServerInfo && statusCity == 5"
      class="server-summary-card"
    >
      <div class="card-header">
        <h4>矩阵详情</h4>
      </div>
      <div class="summary-content">
        <div class="summary-item">
          <span class="label">名称</span>
          <span class="value">{{ selectedServerInfo.name }}</span>
        </div>
        <div class="summary-item">
          <span class="label">槽位总数</span>
          <span class="value">{{ selectedServerInfo.totalSlots }}</span>
        </div>
        <div class="summary-item">
          <span class="label">已用槽位</span>
          <span class="value">{{ selectedServerInfo.usedSlots }}</span>
        </div>
        <div class="summary-item">
          <span class="label">空闲槽位</span>
          <span class="value highlight">{{
            selectedServerInfo.freeSlots
          }}</span>
        </div>
        <div class="summary-item">
          <span class="label">CPU 使用率</span>
          <span class="value">{{ selectedServerInfo.cpuUsage }}%</span>
        </div>
        <div class="summary-item">
          <span class="label">内存使用率</span>
          <span class="value">{{ selectedServerInfo.memoryUsage }}%</span>
        </div>

        <!-- 新增信息 -->
        <div class="summary-item">
          <span class="label">磁盘容量</span>
          <span class="value">{{ selectedServerInfo.diskUsage }} GB</span>
        </div>
        <div class="summary-item">
          <span class="label">网络流量</span>
          <span class="value">{{ selectedServerInfo.networkUsage }} Mbps</span>
        </div>
        <div class="summary-item">
          <span class="label">运行时间</span>
          <span class="value">{{ selectedServerInfo.uptime }}</span>
        </div>
        <div class="summary-item">
          <span class="label">设备型号</span>
          <span class="value">{{ selectedServerInfo.model }}</span>
        </div>
        <div class="summary-item">
          <span class="label">IP 地址</span>
          <span class="value">{{ selectedServerInfo.ipAddress }}</span>
        </div>
        <div class="summary-item">
          <span class="label">状态</span>
          <span :class="['status', statusClass(selectedServerInfo.status)]">{{
            selectedServerInfo.status
          }}</span>
        </div>
      </div>
    </div>
    <!-- 列表模块 2 官网-->
    <div v-if="statusCity == 9" class="tree">
      <FuzzyTreeSearchguanwang
        @node-selected-rsj="showRsj = true"
        style="right: 166px"
      />
    </div>
    <!-- 列表模块 3 监控-->
    <div v-if="statusCity == 10" class="tree">
      <MonitorTreeSearch style="right: 166px" />
    </div>
    <div id="three"></div>
    <div>
      <PopupaletPage
        v-if="showPopup"
        :id="popupId"
        :coordinates="popupCoordinates"
        @close="handleClose"
        @send="handleSend"
      />
    </div>
    <div class="rsjBox" v-if="showRsj">
      <div class="popup-content">
        <div>编号: {{ popupId }}</div>
        <div>坐标: {{ popupCoordinates.lat }}, {{ popupCoordinates.lng }}</div>
      </div>
      <button class="guanbi" @click="showRsj = false">X</button>
    </div>
    <InspectionDataList v-if="xunJianData" />
    <div
      v-if="currentPopupData"
      class="well-popup"
      :class="{ 'flash-red': isFourthPoint }"
    >
      <div class="popup-content">
        <h4>{{ currentPopupData.title }}</h4>
        <div class="data-grid">
          <div
            v-for="(value, key) in currentPopupData.content"
            :key="key"
            class="data-item"
          >
            <strong>{{ key }}:</strong
            ><span
              :style="[
                {
                  color:
                    value == '正常'
                      ? '#00ff00'
                      : value == '异常'
                      ? '#ff0000'
                      : '#fff',
                },
              ]"
            >
              {{ value }}</span
            >
          </div>
        </div>
        <h4>
          状态:
          <span
            :style="[
              {
                color:
                  currentPopupData.stateTitle == '正常'
                    ? '#00ff00'
                    : currentPopupData.stateTitle == '警告'
                    ? '#ff0000'
                    : '#fff',
              },
            ]"
          >
            {{ currentPopupData.stateTitle }}</span
          >
        </h4>
        <div class="data-grid">
          <div
            v-for="(value, key) in currentPopupData.state"
            :key="key"
            class="data-item"
          >
            <strong>{{ key }}:</strong
            ><span
              :style="[
                {
                  color:
                    value.indexOf('正常') != -1
                      ? '#00ff00'
                      : value == '非法移动'
                      ? '#ff0000'
                      : '#fff',
                },
              ]"
            >
              {{ value }}</span
            >
          </div>
        </div>
        <button @click="closePopup">关闭</button>
      </div>
    </div>
    <!-- 监控设备卡片列表 -->
    <div v-if="showMonitorCards && statusCity == 10" class="monitor-card-list">
      <div
        v-for="(card, index) in monitorCards"
        :key="index"
        class="monitor-card"
        :style="{ backgroundImage: 'url(' + card.image + ')' }"
        @click="openMonitorPopup(card)"
      >
        <div class="card-label">{{ card.name }}</div>
      </div>
    </div>
    <!-- 图片弹窗 -->
    <div
      v-if="showPopupCard"
      class="popup-overlay"
      @click.self="closeMonitorPopup"
    >
      <div class="popup-content">
        <img :src="currentPopupCard.image" alt="监控画面" class="popup-image" />
        <div class="popup-time">{{ popupTime }}</div>
        <button @click="closeMonitorPopup" class="popup-close">X</button>
      </div>
    </div>
  </div>
</template>

<script setup>
// import GaoJingPage from './GaoJingPage/GaoJingPage.vue';

// import TelephoneNetworkTwin from "./TelephoneNetworkTwin.vue";
import { useAtomView } from "./atomThree.js";
// import Too from "./Too.vue";
import InspectionDataList from "./InspectionDataList.vue";
import PopupaletPage from "./PopupaletPage/PopupaletPage.vue";
import ContentPage from "./ContentPage/ContentPage.vue";
import ContentPagejf from "./ContentPagedeom/ContentPage.vue";
import EChartsPieChart from "./popUpPage/popUpPage.vue";
import EChartsPieChartLight from "./popUpPagelight/popUpPage.vue";
import VerticalCarousel from "./VerticalCarousel.vue";
import FuzzyTreeSearch from "./FuzzyTreeSearch.vue";
import MonitorTreeSearch from "./MonitorTreeSearch.vue";
import FuzzyTreeSearchguanwang from "./guanwangTree/FuzzyTreeSearch.vue";
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2";
import * as TWEEN from "three/examples/jsm/libs/tween.module.js";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import { FXAAShader } from "three/addons/shaders/FXAAShader.js";
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
// import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.js';
import { onMounted, ref, onUnmounted, watch } from "vue";
let heatMapPlane;
const showPopup = ref(false);
const showRsj = ref(false);
const popupId = ref("人井-BF-N64");
const popupCoordinates = ref({ lat: 39.9042, lng: 116.4074 }); // 示例坐标（北京）
const showAtom = ref(true);
const { initAtom, disposeModels } = useAtomView(showAtom);
const handleClose = () => {
  showPopup.value = false;
};
const handleSend = (data) => {
  console.log("发送的数据:", data);
  showPopup.value = false;
};

let composerStart = false;
//定义相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.01,
  1000
);
//机柜精灵图
const subegroup = new THREE.Group();
//单元精灵图
const subeDgroup = new THREE.Group();
//管网精灵图
const subePipeline = new THREE.Group();
//定义渲染器
let boxRed;
const renderer = new THREE.WebGLRenderer({ antialias: true, autoClear: true });
const scene = new THREE.Scene();
const orbitControls = new OrbitControls(camera, renderer.domElement);
let targetPosition = new THREE.Vector3(-3.7, 3, -6.8);
// 楼层
let floorObj = {};
//流光控制//当前状态控制
const CurrentStatus = ref(false);
//ui状态
const statusCity = ref(1);
const nengHao1 = ref(-100);
const nengHao2 = ref(-100);
const nengHao3 = ref(-100);
const isShow = ref(0);
const statusTree = ref(false);
const rightOpacity = ref(0);
let cylinderMesh,
  ManholeCovers,
  exteriorWall,
  lightFlow,
  worldCity,
  Rectangle216,
  JiaoHuanJi,
  Rectangle,
  carGroup,
  computerGroup,
  guanwangGroup,
  guangDian,
  xjGuangDian,
  thFloor13,
  thFloor12,
  thFloor11,
  thFloor10,
  dengguangzu,
  donghuanGlb,
  sheXiangGroup,
  zhaoming;
const iconPlay = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
//机房矩阵1
let gruopJigui, jifangLightTwo;
//机房其他
let JiFangQita;
//机房单元
let FWQOO1, FWQOO2, FWQOO3, FWQOO4, FWQOO5, FWQOO6, FWQOO7, FWQOO8;
let composer, outlinePass;
const legendData = ref([
  {
    name: "小型井孔",
    size: "400mm × 400mm",
    count: 680,
    imageUrl: require("../../public/static/YellowWell.png"),
  },
  {
    name: "小型井孔",
    size: "600mm × 600mm",
    count: 1000,
    imageUrl: require("../../public/static/redWell.png"), // 假设你有该路径图片
  },
  {
    name: "中型井孔",
    size: "800mm × 800mm",
    count: 700,
    imageUrl: require("../../public/static/blueWell.png"),
  },
  {
    name: "大型井孔",
    size: "1000mm × 1000mm",
    count: 470,
    imageUrl: require("../../public/static/greenWell.png"),
  },
]);
//旋转
//
function init() {
  // let pulseIntensity = 15; // 初始强度
  let pulseSpeed = 0.002; // 呼吸频率
  let minIntensity = 3; // 最小强度
  let maxIntensity = 30; // 最大强度
  // let boxModel = null;
  const container = document.getElementById("three");
  scene.fog = new THREE.Fog(0x080223, 0.5, 50);
  //let worldPosition, worldPositionCome,
  // let cameraPosition = new THREE.Vector3(-6, 5, -2); // 存储相机位置(1)废弃
  // 场景

  // 相机
  // camera.position.set(-8.4, 4.5, -3.56);// 存储相机位置(2)最终观看位置
  // let targetPosition = new THREE.Vector3(0.27, 1.5, -4.95); // 存储相机目标点(2)最终目标点
  // 存储相机目标点(1)初始观看位置
  camera.position.set(-3.7, 30, -6.8); //初始观看位置
  camera.rotation.order = "YXZ";

  // 渲染器
  // scene.add(new THREE.AxesHelper(50))
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor("rgb(17, 30, 84)", 1);
  // EffectComposer 初始化
  // composer.setSize(window.innerWidth, window.innerHeight); // ✅ 设置 composer 尺寸
  // const renderPass = new RenderPass(scene, camera);
  // composer.addPass(renderPass);

  // // ✅ 添加 FXAA 抗锯齿
  // const fxaaPass = new ShaderPass(FXAAShader);
  // fxaaPass.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight);
  // composer.addPass(fxaaPass);

  // // 辉光 pass
  // const bloomPass = new UnrealBloomPass(
  //   new THREE.Vector2(window.innerWidth, window.innerHeight),
  //   0.3,
  //   0.8,
  //   0.2
  // );
  // composer.addPass(bloomPass);

  // 将渲染器绑定到容器
  container.appendChild(renderer.domElement);
  // 相机控制器
  orbitControls.target = targetPosition;
  orbitControls.enableDamping = false;
  orbitControls.enableRotate = false;
  orbitControls.enableZoom = false;
  orbitControls.enablePan = false;
  // orbitControls.minPolarAngle = Math.PI / 2;
  // orbitControls.maxPolarAngle = Math.PI / 2;
  // orbitControls.minDistance = 5;
  // orbitControls.maxDistance = 8;
  // orbitControls.autoRotate = spin.value;
  // orbitControls.autoRotate = true;
  // orbitControls.autoRotateSpeed = 0.2;

  // 灯光
  let cardLightOne = new THREE.DirectionalLight(0xfefaf1, 1);
  cardLightOne.position.set(8, 5, 7);
  cardLightOne.castShadow = true;
  cardLightOne.shadow.camera.near = 1;
  cardLightOne.shadow.camera.far = 300;
  cardLightOne.shadow.mapSize.width = 2048;
  cardLightOne.shadow.mapSize.height = 2048;
  cardLightOne.shadow.bias = -0.005;

  let cardLightTwo = new THREE.DirectionalLight(0xfefaf1, 1);
  cardLightTwo.position.set(-8, 5, -7);
  cardLightTwo.castShadow = true;
  cardLightTwo.shadow.camera.near = 1;
  cardLightTwo.shadow.camera.far = 300;
  cardLightTwo.shadow.mapSize.width = 2048;
  cardLightTwo.shadow.mapSize.height = 2048;
  cardLightTwo.shadow.bias = -0.005;

  jifangLightTwo = new THREE.DirectionalLight(0xffffff, 15);
  jifangLightTwo.position.set(-4.45, 5, -6.08);
  jifangLightTwo.shadow.camera.near = 1;
  jifangLightTwo.shadow.camera.far = 300;
  jifangLightTwo.shadow.mapSize.width = 1024;
  jifangLightTwo.shadow.mapSize.height = 1024;
  jifangLightTwo.visible = true;
  scene.add(jifangLightTwo);

  let hemiLight = new THREE.AmbientLight(0xfee8d1, 3);
  scene.add(hemiLight, cardLightOne, cardLightTwo);
  //添加闪烁盒子
  // function createBlinkingBox(size = { width: 1, height: 1, depth: 1 }, position = { x: 0, y: 0, z: 0 }) {
  const geometry = new THREE.BoxGeometry(0.023, 0.006, 0.04);
  const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    transparent: true,
    opacity: 0.8,
  });
  boxRed = new THREE.Mesh(geometry, material);
  boxRed.position.set(-4.562, 3.997, -6.27);
  boxRed.visible = false;
  scene.add(boxRed);
  // }
  // createBlinkingBox(
  // { width: 0.023, height: 0.006, depth: 0.04 },
  // { x: -4.562, y: 3.997, z: -6.27 }
  // );
  // let flashColor = new THREE.Color(0xff0000); // 初始红色
  // box.visible = false;
  // 加载模型1
  // let cityModel
  function spiritGenerate(parent, name, position) {
    const PipelineMaterial = new THREE.SpriteMaterial({
      map: new THREE.TextureLoader().load("static/shexiangtou.png"),
      transparent: true,
      opacity: 0.9,
      depthWrite: false,
    });
    const Pipeline1 = new THREE.Sprite(PipelineMaterial);
    Pipeline1.name = name;
    Pipeline1.scale.set(0.1, 0.1, 0.1);
    Pipeline1.position.set(position.x, position.y, position.z);
    parent.add(Pipeline1);
  }

  function Ground() {
    const logo = new THREE.Group();
    scene.add(logo);
    new GLTFLoader().load("/static/slzx003.glb", (group) => {
      // new GLTFLoader().load("/static/slzx001.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      worldCity = group.scene;
      // console.log(group.scene);
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.material = new THREE.MeshLambertMaterial({
            color: "#1f5ac5",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x1f5ac5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
      });
      logo.add(group.scene);
      // 更新相机的目标点
    });
    new GLTFLoader().load("/static/slzx004.glb", (group) => {
      // new GLTFLoader().load("/static/slzx001.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      cylinderMesh = group.scene;
      // console.log(group.scene);
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.material = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
        if (object.name.indexOf("LC") > -1) {
          // console.log(object.name);
          floorObj[object.name] = object;
        }
        if (object.name == "jianzhu02") {
          exteriorWall = object;
        }
      });
      logo.add(group.scene);
      // 更新相机的目标点
      TWEEN.removeAll();
      // camera.position.set(-8.4, 4.5, -3.56);// 存储相机位置(2)
      // let targetPosition = new THREE.Vector3(0.27, 1.5, -4.95); // 存储相机目标点(2)
      const tweenA = new TWEEN.Tween(camera.position);
      tweenA.to({ x: -3.7, y: 5, z: -6.8 }, 3000).onUpdate(() => {});
      tweenA.easing(TWEEN.Easing.Quadratic.Inout);
      const tweenB = new TWEEN.Tween(camera.position);
      tweenB.to({ x: -8.4, y: 4.5, z: -3.56 }, 2000);
      tweenB.easing(TWEEN.Easing.Quadratic.Inout);
      const tweenC = new TWEEN.Tween(targetPosition);
      tweenC.to({ x: 0.27, y: 1.5, z: -4.95 }, 2000);
      tweenC.easing(TWEEN.Easing.Quadratic.Inout).onComplete(() => {
        // console.log("动画完成");
        BuildingView();
      });
      const tweenD = new TWEEN.Tween(rightOpacity);
      tweenD.to({ value: 1 }, 1000);
      tweenD.easing(TWEEN.Easing.Quadratic.Inout);
      // tweenB.start();
      tweenA.chain(tweenB, tweenC, tweenD);
      tweenA.start();
    });
    new GLTFLoader().load("/static/jifang5.glb", (group) => {
      // new GLTFLoader().load("/static/slzx001.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      computerGroup = group.scene;
      // console.log(group.scene);
      group.scene.traverse((object) => {
        if (object.name == "ZLZ001") {
          gruopJigui = object;
        }
        if (object.name == "Rectangle216") {
          Rectangle216 = object;
          // console.log(Rectangle216);
        }
        if (object.name == "FWQOO8") {
          FWQOO1 = object;
        }
        if (object.name == "FWQOO7") {
          FWQOO2 = object;
        }
        if (object.name == "FWQOO6") {
          FWQOO3 = object;
        }
        if (object.name == "FWQOO5") {
          FWQOO4 = object;
        }
        if (object.name == "FWQOO4") {
          FWQOO5 = object;
        }
        if (object.name == "FWQOO3001") {
          // console.log(object, 6666666666666666666666666);

          FWQOO6 = object;
        }
        if (object.name == "FWQOO2") {
          FWQOO7 = object;
        }
        if (object.name == "FWQOOQ") {
          FWQOO8 = object;
        }
        if (object.name == "JF14F") {
          JiFangQita = object;
        }
        if (object.name == "Box3098") {
          JiaoHuanJi = object;
        }
        if (object.name == "Rectangle305") {
          Rectangle = object;
        }
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.originalMaterialtwo = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          object.material = object.originalMaterialtwo;
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
            linewidth: 5,
          });
          if (object.name == "Rectangle216") {
            Rectangle216 = line;
            console.log(Rectangle216);
          }
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
        // console.log(object);
      });
      jifangLightTwo.target = gruopJigui;
      computerGroup.visible = false;
      outlineObj();
      logo.add(group.scene);
      // 更新相机的目标点
    });
    new GLTFLoader().load("/static/guanwang.glb", (group) => {
      // new GLTFLoader().load("/static/slzx001.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      guanwangGroup = group.scene;
      // console.log(group.scene, "管网");
      group.scene.traverse((object) => {
        // console.log(object);
        if (object.isMesh) {
          if (object.name == "Box3103" || object.name == "Rectangle386") {
            getMashColor(object, "ff0000");
          } else if (
            object.name == "Box3117" ||
            object.name == "Rectangle384"
          ) {
            getMashColor(object, "00ff00");
          } else if (
            object.name == "Box3118" ||
            object.name == "Rectangle385"
          ) {
            getMashColor(object, "0000ff");
          } else if (
            object.name == "Box3119" ||
            object.name == "Rectangle383"
          ) {
            getMashColor(object, "d0ff00");
          }
        }
      });
      guanwangGroup.visible = false;
      logo.add(group.scene);
    });
    new GLTFLoader().load("/static/jifang13.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      thFloor13 = group.scene;
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.material = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
            linewidth: 5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
      });
      thFloor13.visible = false;
      logo.add(group.scene);
    });
    new GLTFLoader().load("/static/jifang12.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      thFloor12 = group.scene;
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.material = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
            linewidth: 5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
      });
      thFloor12.visible = false;
      logo.add(group.scene);
    });
    new GLTFLoader().load("/static/jifang11.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      thFloor11 = group.scene;
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.material = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
            linewidth: 5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
      });
      thFloor11.visible = false;
      logo.add(group.scene);
    });
    new GLTFLoader().load("/static/jifang10.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      thFloor10 = group.scene;
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.material = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
            linewidth: 5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
      });
      thFloor10.visible = false;
      logo.add(group.scene);
    });
    new GLTFLoader().load("/static/ccb.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      donghuanGlb = group.scene;
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.originalMaterialTwo = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          object.material = object.originalMaterialTwo;
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
            linewidth: 5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
      });
      donghuanGlb.visible = false;
      logo.add(group.scene);
    });
    new GLTFLoader().load("/static/qrd001.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      guangDian = group.scene;
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.originalMaterialTwo = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          object.material = object.originalMaterialTwo;
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
            linewidth: 5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
      });
      guangDian.visible = false;
      logo.add(group.scene);
    });
    new GLTFLoader().load("/static/xjguanwang.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      xjGuangDian = group.scene;
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.originalMaterialTwo = new THREE.MeshLambertMaterial({
            color: "#24d96f",
            transparent: true,
            opacity: 0.8,
            depthWrite: true,
          });
          object.material = object.originalMaterialTwo;
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x24d96f,
            linewidth: 5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
        if (object.name == "JG003") {
          ManholeCovers = object.children[0];
        }
      });
      xjGuangDian.visible = false;
      // console.log(xjGuangDian);

      logo.add(group.scene);
    });
    new GLTFLoader().load("/static/dengguangzu.glb", (group) => {
      // new GLTFLoader().load("/static/slzx001.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      sheXiangGroup = new THREE.Group();
      sheXiangGroup.visible = false;
      scene.add(sheXiangGroup);
      dengguangzu = group.scene;
      console.log(group.scene, 66666666666);
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.material = new THREE.MeshLambertMaterial({
            color: "#ffff00",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0xffff00,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
        if (object.name == "Circle001") {
          const worldPosition = new THREE.Vector3();
          object, object.getWorldPosition(worldPosition);
          spiritGenerate(sheXiangGroup, "Circle001", worldPosition);
        }
        if (object.name == "Circle002") {
          const worldPosition = new THREE.Vector3();
          object, object.getWorldPosition(worldPosition);
          spiritGenerate(sheXiangGroup, "Circle002", worldPosition);
        }
        if (object.name == "Circle003") {
          const worldPosition = new THREE.Vector3();
          object, object.getWorldPosition(worldPosition);
          spiritGenerate(sheXiangGroup, "Circle003", worldPosition);
        }
        if (object.name == "Circle004") {
          const worldPosition = new THREE.Vector3();
          object, object.getWorldPosition(worldPosition);
          spiritGenerate(sheXiangGroup, "Circle004", worldPosition);
        }
        if (object.name == "Circle005") {
          const worldPosition = new THREE.Vector3();
          object, object.getWorldPosition(worldPosition);
          spiritGenerate(sheXiangGroup, "Circle005", worldPosition);
        }
        if (object.name == "Circle006") {
          const worldPosition = new THREE.Vector3();
          object, object.getWorldPosition(worldPosition);
          spiritGenerate(sheXiangGroup, "Circle006", worldPosition);
        }
        if (object.name == "Circle007") {
          const worldPosition = new THREE.Vector3();
          object, object.getWorldPosition(worldPosition);
          spiritGenerate(sheXiangGroup, "Circle007", worldPosition);
        }
        if (object.name == "Circle008") {
          const worldPosition = new THREE.Vector3();
          object, object.getWorldPosition(worldPosition);
          spiritGenerate(sheXiangGroup, "Circle008", worldPosition);
        }
      });
      dengguangzu.visible = false;
      logo.add(group.scene);
      // 更新相机的目标点
    });
    new GLTFLoader().load("/static/zhaoming.glb", (group) => {
      group.scene.scale.multiplyScalar(0.05);
      group.scene.position.set(0, 0, 0);
      zhaoming = group.scene;
      group.scene.traverse((object) => {
        if (object.isMesh) {
          object.originalMaterial = object.material;
          object.originalMaterialTwo = new THREE.MeshLambertMaterial({
            color: "#7cdcf0",
            transparent: true,
            opacity: 0.2,
            depthWrite: false,
          });
          object.material = object.originalMaterialTwo;
          // 模型边线设置
          const edges = new THREE.EdgesGeometry(object.geometry);
          const edgesMaterial = new THREE.LineBasicMaterial({
            color: 0x7cdcf0,
            linewidth: 5,
          });
          const line = new THREE.LineSegments(edges, edgesMaterial);
          object.add(line);
        }
      });
      zhaoming.visible = false;
      logo.add(group.scene);
    });
  }
  function getMashColor(object, color) {
    object.originalMaterial = object.material;
    object.material = new THREE.MeshLambertMaterial({
      color: `#${color}`,
      transparent: true,
      opacity: 0.2,
      depthWrite: false,
    });
    // 模型边线设置
    const edges = new THREE.EdgesGeometry(object.geometry);

    // 使用 LineGeometry 包装原始几何体
    const lineGeometry = new LineGeometry();
    lineGeometry.setPositions(edges.attributes.position.array); // 提取顶点数据

    // 创建 LineMaterial 设置线宽
    const lineMaterial = new LineMaterial({
      color: `#${color}`,
      linewidth: 5, // 实际宽度（单位为像素）
      depthWrite: false,
    });

    const line = new LineSegments2(lineGeometry, lineMaterial);
    object.add(line);
  }
  // 创建精灵材质
  const textLines = ["机柜", "1-1"];
  const canvas = createTextCanvas(textLines, 20, "Arial", "#ffffff"); // 可以修改字体大小和颜色
  const textureSprite = new THREE.CanvasTexture(canvas);
  const spriteMaterial = new THREE.SpriteMaterial({
    map: textureSprite,
    transparent: true,
    opacity: 0.9,
    depthWrite: false,
  });
  function getspriteMash(num, spriteclone, text, color) {
    const textLines2 = [text, num];
    const canvas2 = createTextCanvas(
      textLines2,
      12,
      "Arial",
      color ? color : "#ffffff"
    ); // 可以修改字体大小和颜色
    const textureSprite2 = new THREE.CanvasTexture(canvas2);
    const spriteMaterial2 = new THREE.SpriteMaterial({
      map: textureSprite2,
      transparent: true,
      opacity: 0.9,
      depthWrite: false,
    });
    spriteclone.material = spriteMaterial2;
  }
  // //精灵图
  // const spriteMaterial = new THREE.SpriteMaterial({
  //   map: new THREE.TextureLoader().load('static/weizhi1.png'),
  //   transparent: true,
  //   opacity: 0.9,
  // });
  //创建云图

  let getTemperature = () => {
    var temperatureArray = new Array();
    for (let i = 0; i < 9; i++) {
      temperatureArray[i] = new Array();
      for (let j = 0; j < 9; j++) {
        temperatureArray[i][j] = parseInt(Math.random() * 35);
      }
    }
    return temperatureArray;
  };

  let getPositionXY = (i, j) => {
    let positionX = [5, 20, 35, 50, 65, 70, 95, 80, 60];
    let positionY = [5, 20, 25, 50, 65, 80, 95, 80, 70];
    return {
      x: positionX[i],
      y: positionY[j],
    };
  };

  let drawCircular = (context, opts) => {
    let { x, y, radius, weight } = opts;

    radius = parseInt(radius * weight); //计算出实际的辐射圆

    // 创建圆设置填充色
    let rGradient = context.createRadialGradient(x, y, 0, x, y, radius);
    rGradient.addColorStop(0, "rgba(0, 1, 0, 1)");
    rGradient.addColorStop(1, "rgba(1, 0, 0, 0)");
    context.fillStyle = rGradient;

    // 设置globalAlpha
    context.globalAlpha = weight;
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI);
    context.closePath();

    context.fill(); // 填充
  };

  let createPalette = () => {
    //颜色条的颜色分布
    let colorStops = {
      0: "#0ff",
      0.4: "#0f0",
      0.8: "#ff0",
      1: "#f00",
    };
    //颜色条的大小
    let width = 256,
      height = 1;
    // 创建canvas
    let paletteCanvas = document.createElement("canvas");
    paletteCanvas.width = width;
    paletteCanvas.height = height;
    let ctx = paletteCanvas.getContext("2d");

    // 创建线性渐变色
    let linearGradient = ctx.createLinearGradient(0, 0, width, 0);
    for (const key in colorStops) {
      linearGradient.addColorStop(key, colorStops[key]);
    }

    // 绘制渐变色条
    ctx.fillStyle = linearGradient;
    ctx.fillRect(0, 0, width, height);

    let imageData = ctx.getImageData(0, 0, width, height).data; // 读取像素值

    return {
      canvas: paletteCanvas,
      pickColor: function (position) {
        return imageData.slice(position * 4, position * 4 + 3);
      },
    };
  };

  let heatMap = (width, height) => {
    let canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    let context = canvas.getContext("2d");
    let tenperature = getTemperature();

    for (let i = 0; i < 9; i++) {
      for (let j = 0; j < 9; j++) {
        let weight = tenperature[i][j] / 33; //计算出当前温度占标准温度的权值
        drawCircular(context, {
          x: getPositionXY(i, j).x,
          y: getPositionXY(i, j).y,
          radius: 20,
          weight: weight,
        });
      }
    }
    let palette = createPalette();
    // document.body.appendChild(palette.canvas);
    let imageData = context.getImageData(0, 0, width, height);
    let data = imageData.data;

    for (let i = 3; i < data.length; i += 4) {
      //根据画面数据绘制颜色
      let alpha = data[i];
      let color = palette.pickColor(alpha);
      data[i - 3] = color[0];
      data[i - 2] = color[1];
      data[i - 1] = color[2];
    }

    for (var i = 0; i < imageData.data.length; i += 4) {
      // 背景设置成青色
      if (imageData.data[i + 3] == 0) {
        imageData.data[i] = 0;
        imageData.data[i + 1] = 255;
        imageData.data[i + 2] = 255;
        imageData.data[i + 3] = 255;
      }
    }
    context.putImageData(imageData, 0, 0); //设置画面数据
    return canvas;
  };

  let heatMapGeo = new THREE.PlaneGeometry(100, 100);
  let heatMapTexture = new THREE.Texture(heatMap(100, 100));

  let heatMapMaterial = new THREE.MeshBasicMaterial({
    map: heatMapTexture,
  });
  heatMapMaterial.map.needsUpdate = true;
  heatMapPlane = new THREE.Mesh(heatMapGeo, heatMapMaterial);
  heatMapPlane.position.set(0, 0, 0);
  heatMapPlane.rotation.copy(new THREE.Euler(-Math.PI / 2, 0, Math.PI));
  heatMapPlane.scale.multiplyScalar(0.0175);
  heatMapPlane.position.set(-3.95, 3.9, -6.85);
  heatMapPlane.visible = false;
  scene.add(heatMapPlane);

  const spriteClone = new THREE.Sprite(spriteMaterial);
  spriteClone.scale.set(0.015, 0.015, 0.015);
  spriteClone.position.set(-4.563, 4.03, -6.25); //0.12 //0.015

  let sprite = spriteClone.clone();
  getspriteMash("1-1", sprite, "机柜");
  // sprite.scale.set(0.2, 0.2, 0.2);
  sprite.position.set(-4.563, 4.03, -6.25); //0.12 //0.015
  // sprite.scale.multiplyScalar(0.8);
  let sprite2 = spriteClone.clone();
  getspriteMash("1-2", sprite2, "机柜");
  sprite2.position.set(-4.53258, 4.03, -6.25);
  // sprite2.scale.multiplyScalar(0.8);
  let sprite3 = spriteClone.clone();
  getspriteMash("1-3", sprite3, "机柜");
  sprite3.position.set(-4.50216, 4.03, -6.25);
  // sprite3.scale.multiplyScalar(0.8);
  let sprite4 = spriteClone.clone();
  getspriteMash("1-4", sprite4, "机柜");
  sprite4.position.set(-4.47174, 4.03, -6.25);
  // sprite4.scale.multiplyScalar(0.8);
  let sprite5 = spriteClone.clone();
  getspriteMash("1-5", sprite5, "机柜");
  sprite5.position.set(-4.44132, 4.03, -6.25);
  // sprite5.scale.multiplyScalar(0.8);
  let sprite6 = spriteClone.clone();
  getspriteMash("1-6", sprite6, "机柜");
  sprite6.position.set(-4.4109, 4.03, -6.25);
  // sprite6.scale.multiplyScalar(0.8);
  let sprite7 = spriteClone.clone();
  getspriteMash("1-7", sprite7, "机柜");
  sprite7.position.set(-4.38048, 4.03, -6.25);
  // sprite7.scale.multiplyScalar(0.8);
  let sprite8 = spriteClone.clone();
  getspriteMash("1-8", sprite8, "机柜");
  sprite8.position.set(-4.35006, 4.03, -6.25);
  // sprite8.scale.multiplyScalar(0.8);
  subegroup.add(sprite2, sprite3, sprite4, sprite5, sprite6, sprite7, sprite8);
  scene.add(subegroup, sprite);
  subegroup.visible = false;
  window.sprite = sprite;

  let sprite11 = sprite.clone();
  sprite11.name = "1101";
  getspriteMash("1-1-1", sprite11, "单元", "#e9000d");
  sprite11.position.set(-4.59342, 4, -6.25);
  // sprite11.scale.multiplyScalar(0.8);
  let sprite12 = sprite.clone();
  sprite12.name = "1102";
  getspriteMash("1-1-2", sprite12, "单元");
  sprite12.position.set(-4.53258, 3.99, -6.25);
  // sprite12.scale.multiplyScalar(0.8);
  let sprite13 = sprite.clone();
  sprite13.name = "1103";
  getspriteMash("1-1-3", sprite13, "单元");
  sprite13.position.set(-4.59342, 3.98, -6.25);
  // sprite13.scale.multiplyScalar(0.8);
  let sprite14 = sprite.clone();
  sprite14.name = "1104";
  getspriteMash("1-1-4", sprite14, "单元");
  sprite14.position.set(-4.53258, 3.97, -6.25);
  // sprite14.scale.multiplyScalar(0.8);
  let sprite15 = sprite.clone();
  sprite15.name = "1105";
  getspriteMash("1-1-5", sprite15, "单元");
  sprite15.position.set(-4.59342, 3.96, -6.25);
  // sprite15.scale.multiplyScalar(0.8);
  let sprite16 = sprite.clone();
  sprite16.name = "1106";
  getspriteMash("1-1-6", sprite16, "单元");
  sprite16.position.set(-4.53258, 3.95, -6.25);
  // sprite16.scale.multiplyScalar(0.8);
  let sprite17 = sprite.clone();
  sprite17.name = "1107";
  getspriteMash("1-1-7", sprite17, "单元");
  sprite17.position.set(-4.59342, 3.94, -6.25);
  // sprite17.scale.multiplyScalar(0.8);
  let sprite18 = sprite.clone();
  sprite18.name = "1108";
  getspriteMash("1-1-8", sprite18, "单元");
  sprite18.position.set(-4.53258, 3.93, -6.25);
  // sprite18.scale.multiplyScalar(0.8);
  subeDgroup.visible = false;
  subeDgroup.add(
    sprite11,
    sprite12,
    sprite13,
    sprite14,
    sprite15,
    sprite16,
    sprite17,
    sprite18
  );
  scene.add(subeDgroup);

  const PipelineMaterial = new THREE.SpriteMaterial({
    map: new THREE.TextureLoader().load("static/dingwei.png"),
    transparent: true,
    opacity: 0.9,
  });
  const Pipeline1 = new THREE.Sprite(PipelineMaterial);
  Pipeline1.scale.set(0.3, 0.3, 0.3);
  Pipeline1.name = "Pipeline1";
  Pipeline1.position.set(-6.298, 0.2, -6.896); //0.12 //0.015
  const Pipeline2 = new THREE.Sprite(PipelineMaterial);
  Pipeline2.scale.set(0.3, 0.3, 0.3);
  Pipeline2.position.set(-3.82, 0.2, -2.6); //0.12 //0.015
  Pipeline2.name = "Pipeline2";
  const Pipeline3 = new THREE.Sprite(PipelineMaterial);
  Pipeline3.scale.set(0.3, 0.3, 0.3);
  Pipeline3.position.set(-3.836, 0.2, -9.937); //0.12 //0.015
  Pipeline3.name = "Pipeline3";
  const Pipeline4 = new THREE.Sprite(PipelineMaterial);
  Pipeline4.scale.set(0.3, 0.3, 0.3);
  Pipeline4.position.set(-1.547, 0.2, -7.026); //0.12 //0.015
  Pipeline4.name = "Pipeline4";
  subePipeline.add(Pipeline1, Pipeline2, Pipeline3, Pipeline4);
  scene.add(subePipeline);
  subePipeline.visible = false;

  //单元精灵图
  // 添加点击事件监听器
  window.addEventListener("click", onClick, false);
  // //流光
  let texture, textureMashTwo, textureMashThree, textureMashFour; //,Five,Six
  function streamer() {
    carGroup = new THREE.Group();
    scene.add(carGroup);
    // 创建顶点数组
    let points = [
      new THREE.Vector3(-10, 0, -50),
      new THREE.Vector3(-10, 0, -25),
      new THREE.Vector3(-10, 0, 25),
      new THREE.Vector3(-10, 0, 50),
    ];
    // CatmullRomCurve3创建一条平滑的三维样条曲线
    let curve = new THREE.CatmullRomCurve3(points); // 曲线路径
    //1
    texture = new THREE.TextureLoader().load("static/车.png", () => {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping; //每个都重复
      texture.repeat.set(1, 1);
      texture.needsUpdate = true;
      let material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.BackSide,
        transparent: true,
        depthWrite: false,
      });

      // 创建管道
      let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.05);
      let mesh = new THREE.Mesh(tubeGeometry, material);
      mesh.position.set(2.5, 0.1, -9);
      mesh.rotation.y = THREE.MathUtils.degToRad(-0.8);
      //7
      let mashSeven = mesh.clone();
      mashSeven.position.set(18.2, 0.1, -9); //12
      mashSeven.rotation.y = THREE.MathUtils.degToRad(0.8);
      carGroup.add(mesh, mashSeven);
    });

    //2
    textureMashTwo = new THREE.TextureLoader().load("static/车2.png", () => {
      textureMashTwo.wrapS = textureMashTwo.wrapT = THREE.RepeatWrapping; //每个都重复
      textureMashTwo.repeat.set(1, 1);
      textureMashTwo.needsUpdate = true;
      let materialMashTwo = new THREE.MeshBasicMaterial({
        map: textureMashTwo,
        side: THREE.BackSide,
        depthWrite: false,
        transparent: true,
      });
      // 创建管道
      let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.05);
      let mashTwo = new THREE.Mesh(tubeGeometry, materialMashTwo);
      mashTwo.material = materialMashTwo;
      mashTwo.position.set(-16.9, 0.1, -9);
      mashTwo.rotation.y = THREE.MathUtils.degToRad(178.9);
      //8
      let mashEight = mashTwo.clone();
      mashEight.position.set(-2.3, 0.1, -9);
      mashEight.rotation.y = THREE.MathUtils.degToRad(-0.8);
      carGroup.add(mashTwo, mashEight);
    });
    //3
    // let mashThree = mesh.clone()
    textureMashThree = new THREE.TextureLoader().load("static/车3.png", () => {
      textureMashThree.wrapS = textureMashThree.wrapT = THREE.RepeatWrapping; //每个都重复
      textureMashThree.repeat.set(1, 1);
      textureMashThree.needsUpdate = true;
      let materialMashThree = new THREE.MeshBasicMaterial({
        map: textureMashThree,
        side: THREE.BackSide,
        depthWrite: false,
        transparent: true,
      });
      // 创建管道
      let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.05);
      let mashThree = new THREE.Mesh(tubeGeometry, materialMashThree);
      mashThree.position.set(-16.9, 0.1, -20.65);
      mashThree.rotation.y = THREE.MathUtils.degToRad(91);
      //5
      let mashFive = mashThree.clone();
      mashFive.position.set(-16.9, 0.1, 1.2);
      carGroup.add(mashThree, mashFive);
    });
    //4
    // let mashFour = mesh.clone()
    textureMashFour = new THREE.TextureLoader().load("static/车4.png", () => {
      textureMashFour.wrapS = textureMashFour.wrapT = THREE.RepeatWrapping; //每个都重复
      textureMashFour.repeat.set(1, 1);
      textureMashFour.needsUpdate = true;
      let materialMashFour = new THREE.MeshBasicMaterial({
        map: textureMashFour,
        side: THREE.BackSide,
        depthWrite: false,
        transparent: true,
      });
      // 创建管道
      let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.05);
      let mashFour = new THREE.Mesh(tubeGeometry, materialMashFour);
      mashFour.position.set(-16.9, 0.1, 20.5);
      mashFour.rotation.y = THREE.MathUtils.degToRad(-88.5);
      //6
      let mashSix = mashFour.clone();
      mashSix.position.set(-16.9, 0.1, 0.15);
      carGroup.add(mashFour, mashSix);
    });
    // scene.add(mesh, mashTwo, mashThree, mashFour, mashFive, mashSix, mashSeven, mashEight)
  }
  // 代码流
  function createCodeFlowModel() {
    lightFlow = new THREE.Group();
    const textureLoader = new THREE.TextureLoader();
    const codeTexture = textureLoader.load("static/code_flow.png", () => {
      codeTexture.wrapS = THREE.RepeatWrapping;
      codeTexture.wrapT = THREE.RepeatWrapping;
      codeTexture.repeat.set(60, 1); // 横向重复
    });

    const material = new THREE.MeshBasicMaterial({
      map: codeTexture,
      transparent: true,
      opacity: 0.9,
      side: THREE.DoubleSide,
      depthWrite: false,
    });

    // 创建一个平面表示代码流动的长条
    const geometry = new THREE.PlaneGeometry(200, 2); // 长度5，宽度0.5
    const mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.x = -Math.PI / 2; // 朝上
    mesh.rotation.y = -Math.PI / 2; // 朝上
    mesh.position.set(-5, 100, -6.75); // 设置位置

    let mesh2 = mesh.clone();
    mesh2.position.set(-3.9, 100, -7.85); // 设置位置
    mesh2.rotation.z = -Math.PI / 2; // 朝上
    mesh2.rotation.y = -Math.PI; // 朝上
    mesh2.rotation.x = -Math.PI; // 朝上

    let mesh3 = mesh.clone();
    mesh3.position.set(-2.85, 100, -6.9); // 设置位置

    let mesh4 = mesh.clone();
    mesh4.position.set(-3.9, 100, -5.74); // 设置位置
    mesh4.rotation.z = -Math.PI / 2; // 朝上
    mesh4.rotation.y = -Math.PI; // 朝上
    mesh4.rotation.x = -Math.PI; // 朝上

    lightFlow.add(mesh, mesh2, mesh3, mesh4);
    scene.add(lightFlow);

    // 动态更新纹理偏移
    function updateTextureOffset() {
      if (codeTexture.offset.x >= 1) codeTexture.offset.x = 0;
      codeTexture.offset.x -= 0.01;
      codeTexture.needsUpdate = true;
    }

    // 将更新函数绑定到 animate 循环中
    window.codeFlowAnimation = updateTextureOffset;
  }
  Ground();
  streamer();
  createCodeFlowModel();
  // initComposer()
  // 在 init 函数内定义 raycaster 和 mouse
  // const raycaster = new THREE.Raycaster();
  // const mouse = new THREE.Vector2();

  // // 添加点击事件监听器
  // window.addEventListener("click", onMouseClick, false);

  // // 点击事件处理函数
  // function onMouseClick(event) {
  //   // 标准化鼠标坐标（-1 到 +1）
  //   mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  //   mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  //   // 更新射线
  //   raycaster.setFromCamera(mouse, camera);

  //   // 定义一个参考平面（例如 y=0 的平面）
  //   const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // y=0 的平面
  //   const intersectionPoint = new THREE.Vector3();

  //   // 计算射线与平面的交点
  //   const isIntersected = raycaster.ray.intersectPlane(
  //     plane,
  //     intersectionPoint
  //   );

  //   if (isIntersected) {
  //     console.log("点击的世界坐标:", intersectionPoint);
  //     // 可以在这里创建一个小球或标记来可视化点击位置
  //     createMarker(intersectionPoint);
  //   }
  // }

  // 创建标记（可选）
  // function createMarker(position) {
  //   const geometry = new THREE.SphereGeometry(0.1, 16, 16); // 小球体
  //   const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  //   const marker = new THREE.Mesh(geometry, material);
  //   marker.position.copy(position);
  //   scene.add(marker);

  //   // 可选：设置定时器移除标记
  //   setTimeout(() => {
  //     scene.remove(marker);
  //   }, 3000);
  // }

  let frameCount = 0;
  function updateAnimations() {
    if (++frameCount % 2 === 0) {
      // 每两帧更新一次
      if (texture) texture.offset.x -= 0.02;
      if (textureMashTwo) textureMashTwo.offset.x -= 0.018;
      if (textureMashThree) textureMashThree.offset.x -= 0.022;
      if (textureMashFour) textureMashFour.offset.x -= 0.016;
      // 更新代码流动效果
      if (window.codeFlowAnimation) window.codeFlowAnimation();
    }
  }

  let flashToggle = false;
  //
  // let ManholeCovers;
  // // let flashToggle = false;
  // const flashInterval = 500;
  // let lastFlashTime = 0;
  // 动画循环
  function animate() {
    updateAnimations();
    // cylinderAnimate();
    orbitControls.update();
    TWEEN.update();
    requestAnimationFrame(animate);
    if (composerStart) {
      composer.render();
    } else {
      renderer.render(scene, camera);
    }
    if (statusCity.value == 1) {
      const time = Date.now() * pulseSpeed;
      const intensity = (Math.sin(time) + 1) / 2; // [0, 1] 范围
      jifangLightTwo.intensity =
        minIntensity + intensity * (maxIntensity - minIntensity);
    }
    // 控制闪烁频率
    if (boxRed && boxRed.material && ManholeCovers) {
      const speed = 500; // 闪烁间隔时间（毫秒）
      const now = Date.now();

      if (now % speed < speed / 2) {
        if (!flashToggle) {
          boxRed.material.color.set(0xffff00); // 蓝色
          ManholeCovers.material.color.set(0x28d770);
          flashToggle = true;
        }
      } else {
        if (flashToggle) {
          boxRed.material.color.set(0xff0000); // 红色
          ManholeCovers.material.color.set(0xff0000);
          flashToggle = false;
        }
      }
    }

    // subegroup.traverse((children) => {
    // const time = Date.now() * 0.005
    // //   children.position.y = Math.cos(time) * 0.005 + 1.5
    // // })
    // subegroup.position.y = Math.cos(time) * 0.005 + 0
  }
  animate();
}
//模型卸载
function disposeModel(model) {
  if (!model) return;

  // 从场景中移除
  if (model.parent) {
    model.parent.remove(model);
  }

  // 释放几何体、材质和纹理
  model.traverse((object) => {
    if (object.isMesh) {
      const geometry = object.geometry;
      const material = object.material;

      geometry.dispose();

      if (Array.isArray(material)) {
        material.forEach((mtrl) => {
          if (mtrl.map) mtrl.map.dispose();
          mtrl.dispose();
        });
      } else {
        if (material.map) material.map.dispose();
        material.dispose();
      }
    }
  });

  // 置空引用
  model = null;
}

watch(
  () => statusCity.value,
  (newVal) => {
    if (newVal > 3 && newVal < 8) {
      statusTree.value = true;
    } else {
      statusTree.value = false;
    }
    if (boxRed) {
      if (newVal > 1 && newVal < 8) {
        boxRed.visible = true;
      } else {
        boxRed.visible = false;
      }
    }
    if (JiaoHuanJi && donghuanGlb) {
      if (newVal == 8 || newVal == 2) {
        donghuanGlb.visible = true;
        JiaoHuanJi.visible = true;
      } else {
        donghuanGlb.visible = false;
        JiaoHuanJi.visible = false;
      }
    }
    if (guangDian) {
      if (newVal == 2) {
        dengguangzu.visible = true;
        guangDian.visible = true;
      } else {
        guangDian.visible = false;
        dengguangzu.visible = false;
      }
    }
    if (heatMapPlane) {
      if (newVal == 11) {
        heatMapPlane.visible = true;
      } else {
        heatMapPlane.visible = false;
      }
    }
    if (zhaoming) {
      if (newVal == 12||newVal == 2) {
        zhaoming.visible = true;
      } else {
        zhaoming.visible = false;
      }
    }
    if (xjGuangDian) {
      if (newVal == 9) {
        xjGuangDian.visible = true;
      } else {
        xjGuangDian.visible = false;
      }
    }
    // if (newVal != 10) {
    //   showMonitorCards.value = false;
    // }

    if (dengguangzu) {
      if (newVal == 10) {
        dengguangzu.visible = true;
        showMonitorCards.value = true;
        sheXiangGroup.visible = true;
      } else {
        dengguangzu.visible = false;
        showMonitorCards.value = false;
        sheXiangGroup.visible = false;
      }
    }
    //
  }
);
const InspectionSwitches = ref(false);
function goInspectPipelines() {
  InspectionSwitches.value = true;
  orbitControls.enableDamping = true;
  orbitControls.enableRotate = true;
  orbitControls.enableZoom = true;
  // orbitControls.enablePan = true;
  orbitControls.minPolarAngle = -Infinity;
  orbitControls.maxPolarAngle = Infinity;
  orbitControls.minAzimuthAngle = -Infinity;
  orbitControls.maxAzimuthAngle = Infinity;
  goToInspectionPoint(0);
  // 1.{x: -6.265947544412854, y: 0.107, z: -6.906364537632117} {x: -6.406174152374588, y: -0.3764033483699762, z: -5.0826537925686015}
  // 2.{x: -6.396024461659558, y: 0.107, z: -3.0658688727903947} {x: -6.385872430390161, y: 0, z: -2.625512936493915}
  // 3.{x: -6.536083318535014, y: 0.28045296429163413, z: 0.8502041367489896} {x: -6.4926453185210455, y: 0, z: 1.46750167901692}
  // 4.{x: -1.9529903406004658, y: 0.24036785714161357, z: 1.4815456154552589} {x: -1.4803183492959904, y: 0, z: 1.480757587386614}
  // 5.{x: -1.4408259922231859, y: 0.19350704445537814, z: 7.572208519975029} {x: -1.4670061126715201, y: 0, z: 8.133630345649761}
  // 6.{x: 6.975356894686365, y: 0.25632923510817984, z: 8.159696683478751} {x: 7.435977861829927, y: 0, z: 8.165578407429315}
  // 7.{x: 7.392898401228854, y: 0.26387333674860425, z: 2.119298508891} {x: 7.392786810216832, y: 0, z: 1.5128606175558448}
}
const inspectionPoints = [
  {
    cameraPosition: new THREE.Vector3(
      -6.265947544412854,
      0.107,
      -6.906364537632117
    ),
    targetPosition: new THREE.Vector3(
      -6.406174152374588,
      -0.3764033483699762,
      -5.0826537925686015
    ),
    popupData: {
      title: "人孔-CNMO-1827",
      content: {
        坐标: "39.9123°N, 116.4123°E",
        类型: "网络-光缆",
        型号: "小号人孔",
        巡检站名称: "XJZ48",
        空间位置: "地下深度1.8米",
        网络标识: "XF-748",
        终端数据节点: "GTC-427",
        网络光缆数量: "128条",
        井群编号: "WL-GL-74",
        单位号码: "800-800-800",
      },
      stateTitle: "正常",
      state: {
        井盖状态: "正常",
        液位状态: "正常",
        有害气体: "正常",
        氧气浓度: "正常",
        湿度: "60% 正常",
        温度: "32℃ 正常",
        光交箱: "正常",
        设备温度: "40℃ 正常",
        配线架: "正常",
        电源状态: "正常",
        端口连接: "正常",
        光功率: "正常",
        光损耗值: "正常",
        光反射峰: "正常",
        OTDR: "正常",
      },
    },
  },
  {
    cameraPosition: new THREE.Vector3(
      -6.396024461659558,
      0.107,
      -3.0658688727903947
    ),
    targetPosition: new THREE.Vector3(
      -6.385872430390161,
      0,
      -2.625512936493915
    ),
    popupData: {
      title: "人孔-CNMO-1829",
      content: {
        坐标: "39.9127°N, 116.4127°E",
        类型: "网络-光缆",
        型号: "直通型人孔",
        巡检站名称: "XJZ50",
        空间位置: "地下深度1.8米",
        网络标识: "XF-750",
        终端数据节点: "GTC-429",
        网络光缆数量: "128条",
        井群编号: "WL-GL-76",
        单位号码: "800-800-802",
      },
      stateTitle: "正常",
      state: {
        井盖状态: "正常",
        液位状态: "正常",
        有害气体: "正常",
        氧气浓度: "正常",
        湿度: "60% 正常",
        温度: "32℃ 正常",
        光交箱: "正常",
        设备温度: "40 正常℃",
        配线架: "正常",
        电源状态: "正常",
        端口连接: "正常",
        光功率: "正常",
        光损耗值: "正常",
        光反射峰: "正常",
        OTDR: "正常",
      },
    },
  },
  {
    cameraPosition: new THREE.Vector3(
      -6.536083318535014,
      0.28045296429163413,
      0.8502041367489896
    ),
    targetPosition: new THREE.Vector3(-6.4926453185210455, 0, 1.46750167901692),
    popupData: {
      title: "人孔-CNMO-1830",
      content: {
        坐标: "39.9129°N, 116.4129°E",
        类型: "网络-光缆",
        型号: "大号人孔",
        巡检站名称: "XJZ51",
        空间位置: "地下深度1.8米",
        网络标识: "XF-751",
        终端数据节点: "GTC-430",
        网络光缆数量: "128条",
        井群编号: "WL-GL-77",
        单位号码: "800-800-803",
      },
      stateTitle: "正常",
      state: {
        井盖状态: "正常",
        液位状态: "正常",
        有害气体: "正常",
        氧气浓度: "正常",
        湿度: "60% 正常",
        温度: "32℃ 正常",
        光交箱: "正常",
        设备温度: "40℃ 正常",
        配线架: "正常",
        电源状态: "正常",
        端口连接: "正常",
        光功率: "正常",
        光损耗值: "正常",
        光反射峰: "正常",
        OTDR: "正常",
      },
    },
  },
  {
    cameraPosition: new THREE.Vector3(
      -1.9529903406004658,
      0.24036785714161357,
      1.4815456154552589
    ),
    targetPosition: new THREE.Vector3(
      -1.4803183492959904,
      0,
      1.480757587386614
    ),
    popupData: {
      title: "人孔-CNMO-1831",
      content: {
        坐标: "39.9131°N, 116.4131°E",
        类型: "网络-光缆",
        型号: "中号人孔",
        巡检站名称: "XJZ52",
        空间位置: "地下深度1.8米",
        网络标识: "XF-752",
        终端数据节点: "GTC-431",
        网络光缆数量: "128条",
        井群编号: "WL-GL-78",
        单位号码: "800-800-804",
      },
      stateTitle: "警告",
      state: {
        井盖状态: "非法移动",
        液位状态: "正常",
        有害气体: "正常",
        氧气浓度: "正常",
        湿度: "60% 正常",
        温度: "32℃ 正常",
        光交箱: "正常",
        设备温度: "40℃ 正常",
        配线架: "正常",
        电源状态: "正常",
        端口连接: "正常",
        光功率: "正常",
        光损耗值: "正常",
        光反射峰: "正常",
        OTDR: "正常",
      },
    },
  },
  {
    cameraPosition: new THREE.Vector3(
      -1.4408259922231859,
      0.19350704445537814,
      7.572208519975029
    ),
    targetPosition: new THREE.Vector3(
      -1.4670061126715201,
      0,
      8.133630345649761
    ),
    popupData: {
      title: "人孔-CNMO-1832",
      content: {
        坐标: "39.9133°N, 116.4133°E",
        类型: "网络-光缆",
        型号: "中号人孔",
        巡检站名称: "XJZ53",
        空间位置: "地下深度1.8米",
        网络标识: "XF-753",
        终端数据节点: "GTC-432",
        网络光缆数量: "128条",
        井群编号: "WL-GL-79",
        单位号码: "800-800-805",
      },
      stateTitle: "正常",
      state: {
        井盖状态: "正常",
        液位状态: "正常",
        有害气体: "正常",
        氧气浓度: "正常",
        湿度: "60% 正常",
        温度: "32℃ 正常",
        光交箱: "正常",
        设备温度: "40℃ 正常",
        配线架: "正常",
        电源状态: "正常",
        端口连接: "正常",
        光功率: "正常",
        光损耗值: "正常",
        光反射峰: "正常",
        OTDR: "正常",
      },
    },
  },
  {
    cameraPosition: new THREE.Vector3(
      6.975356894686365,
      0.25632923510817984,
      8.159696683478751
    ),
    targetPosition: new THREE.Vector3(7.435977861829927, 0, 8.165578407429315),
    popupData: {
      title: "人孔-CNMO-1833",
      content: {
        坐标: "39.9135°N, 116.4135°E",
        类型: "网络-光缆",
        型号: "三通型人孔",
        巡检站名称: "XJZ54",
        空间位置: "地下深度1.8米",
        网络标识: "XF-754",
        终端数据节点: "GTC-433",
        网络光缆数量: "128条",
        井群编号: "WL-GL-80",
        单位号码: "800-800-806",
      },
      stateTitle: "正常",
      state: {
        井盖状态: "正常",
        液位状态: "正常",
        有害气体: "正常",
        氧气浓度: "正常",
        湿度: "60% 正常",
        温度: "32℃ 正常",
        光交箱: "正常",
        设备温度: "40℃ 正常",
        配线架: "正常",
        电源状态: "正常",
        端口连接: "正常",
        光功率: "正常",
        光损耗值: "正常",
        光反射峰: "正常",
        OTDR: "正常",
      },
    },
  },
  {
    cameraPosition: new THREE.Vector3(
      7.392898401228854,
      0.26387333674860425,
      2.119298508891
    ),
    targetPosition: new THREE.Vector3(7.392786810216832, 0, 1.5128606175558448),
    popupData: {
      title: "人孔-CNMO-1834",
      content: {
        坐标: "39.9137°N, 116.4137°E",
        类型: "网络-光缆",
        型号: "小型人孔",
        巡检站名称: "XJZ55",
        空间位置: "地下深度1.8米",
        网络标识: "XF-755",
        终端数据节点: "GTC-434",
        网络光缆数量: "128条",
        井群编号: "WL-GL-81",
        单位号码: "800-800-807",
      },
      stateTitle: "正常",
      state: {
        井盖状态: "正常",
        液位状态: "正常",
        有害气体: "正常",
        氧气浓度: "正常",
        湿度: "60% 正常",
        温度: "32℃ 正常",
        光交箱: "正常",
        设备温度: "40℃ 正常",
        配线架: "正常",
        电源状态: "正常",
        端口连接: "正常",
        光功率: "正常",
        光损耗值: "正常",
        光反射峰: "正常",
        OTDR: "正常",
      },
    },
  },
];
//定义跳转到指定巡检点函数
let currentPointIndex = ref(0);
const currentPopupData = ref(null); // 当前弹窗数据
let popupTimer = null;
// 添加响应式变量
const isFourthPoint = ref(false); // 是否为第4个点
function goToInspectionPoint(index) {
  currentPopupData.value = null;
  if (index < 0 || index >= inspectionPoints.length) return;

  const point = inspectionPoints[index];

  TWEEN.removeAll();

  new TWEEN.Tween(camera.position)
    .to(point.cameraPosition, 2000)
    .easing(TWEEN.Easing.Quadratic.InOut)
    .start();

  new TWEEN.Tween(orbitControls.target)
    .to(point.targetPosition, 2000)
    .easing(TWEEN.Easing.Quadratic.InOut)
    .onUpdate(() => orbitControls.update())
    .onComplete(() => {
      // 设置弹窗内容
      if (point.popupData) {
        currentPopupData.value = point.popupData;

        // 判断是否是第4个点
        isFourthPoint.value = index === 3;

        // popupTimer = setTimeout(() => {
        //   currentPopupData.value = null;
        // }, 5000); // 5秒后关闭
      } else {
        currentPopupData.value = null;
      }
    })
    .start();

  currentPointIndex.value = index;
}
function closePopup() {
  currentPopupData.value = null;
}
function goNextWell() {
  clearTimeout(popupTimer);
  const nextIndex = currentPointIndex.value + 1;
  if (nextIndex < inspectionPoints.length) {
    goToInspectionPoint(nextIndex);
  }
}

function goPrevWell() {
  const prevIndex = currentPointIndex.value - 1;
  if (prevIndex >= 0) {
    goToInspectionPoint(prevIndex);
  }
}
//结束巡检
function endInspection() {
  // 停止所有 TWEEN 动画
  TWEEN.removeAll();

  // 关闭弹窗
  currentPopupData.value = null;
  clearTimeout(popupTimer);

  // 退出巡检模式，恢复 OrbitControls 控制
  orbitControls.enableDamping = false;
  orbitControls.enableRotate = true;
  orbitControls.enableZoom = true;
  orbitControls.enablePan = true;

  // 重置相机到默认位置（可自定义）
  new TWEEN.Tween(camera.position)
    .to(
      {
        x: -8.4,
        y: 4.5,
        z: -3.56,
      },
      2000
    )
    .easing(TWEEN.Easing.Quadratic.InOut)
    .start();

  new TWEEN.Tween(orbitControls.target)
    .to(
      {
        x: 0.27,
        y: 1.5,
        z: -4.95,
      },
      2000
    )
    .easing(TWEEN.Easing.Quadratic.InOut)
    .onUpdate(() => {
      orbitControls.update();
    })
    .start();

  // 重置巡检状态
  InspectionSwitches.value = false;
  currentPointIndex.value = 0;
}
//点击了服务器
function clickServerRed() {
  handleNodeSelected({ id: 1 });
}
//跳转动力网
function clickEquipment() {
  statusCity.value = 8;
  Rectangle.visible = false;
  gruopJigui.visible = false;
}
//点击了计算机
function clickComputer() {
  statusCity.value = 3;
  // console.log("点击了计算机");
  if (isXunJian.value) {
    isXunJian.value = false;
    // console.log(camera.position.y);
    TWEEN.removeAll();
    //归位相机
    new TWEEN.Tween(camera.position)
      .to(
        {
          x: -3.7,
          y: 5.1,
          z: -5.8,
        },
        3000
      )
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onComplete(() => {
        isXunJian.value = false;
      })
      .start();
    new TWEEN.Tween(orbitControls.target)
      .to(
        {
          x: -3.7,
          y: 3.6,
          z: -6.76,
        },
        3000
      )
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onUpdate(() => {})
      .start();
  }
  // togglePopup('computer', 1)
}
//点击了服务器
function clickServer() {
  statusCity.value = 4;
  // console.log("点击了服务器");
  statusTree.value = true;
  // togglePopup('computer', 1)
}

function guangDianMouseEnter() {
  restoreOriginalMaterial(guangDian);
}

function guangDianMouseLeave() {
  convertToTransparentMaterial(guangDian);
}
function lightingMouseEnter() {
  restoreOriginalMaterial(zhaoming);
}

function lightingMouseLeave() {
  convertToTransparentMaterial(zhaoming);
}
function loadMouseEnter() {
  heatMapPlane.visible = true;
  onMouseEnter();
}

function loadMouseLeave() {
  heatMapPlane.visible = false;
  onMouseLeave();
}

function onMouseEnter() {
  // console.log(Rectangle);
  restoreOriginalMaterial(Rectangle);
  restoreOriginalMaterial(gruopJigui);
}

function onMouseLeave() {
  convertToTransparentMaterial(Rectangle);
  convertToTransparentMaterial(gruopJigui);
}
function dongLiMouseLeave() {
  convertToTransparentMaterial(JiaoHuanJi); //donghuanGlb
  convertToTransparentMaterial(donghuanGlb); //donghuanGlb
} //移出动环
function dongLiMouseEnter() {
  restoreOriginalMaterial(JiaoHuanJi);
  restoreOriginalMaterial(donghuanGlb);
} //移入动环
//canvas生成
function createTextCanvas(
  textLines,
  fontSize = 24,
  fontFamily = "Arial",
  color = "white"
) {
  const canvas = document.createElement("canvas");
  const padding = 10;
  const lineHeight = fontSize * 1.2;

  // 计算宽高
  const ctx = canvas.getContext("2d");
  ctx.font = `${fontSize}px ${fontFamily}`;
  const maxWidth = Math.max(
    ...textLines.map((line) => ctx.measureText(line).width)
  );
  canvas.width = maxWidth + padding * 2;
  canvas.height = textLines.length * lineHeight + padding * 2;

  // 绘制背景透明
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "rgba(0, 0, 0, 0)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 设置文字样式
  ctx.fillStyle = color;
  ctx.font = `${fontSize}px ${fontFamily}`;
  ctx.textAlign = "center";
  ctx.textBaseline = "top";

  // 绘制每一行文字
  textLines.forEach((line, i) => {
    ctx.fillText(line, canvas.width / 2, padding + i * lineHeight);
  });

  return canvas;
}
//点击精灵图
function onClick(event) {
  if (!window.sprite) {
    console.error("精灵图未定义，请确认已赋值！");
    return;
  }
  const mouse = new THREE.Vector2(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);

  //点击了
  // console.log("onClick");

  if (window.sprite && raycaster.intersectObject(window.sprite).length > 0) {
    console.log("点击了精灵图！");
    clickJigui(); // 或 handleNodeSelected(...)
  }
  if (raycaster.intersectObject(subeDgroup).length > 0) {
    // console.log('点击了单元', raycaster.intersectObject(subeDgroup)[0].object.name);
    // console.log(raycaster.intersectObject(subeDgroup));
    // clickDanyuan()
    handleNodeSelected({
      id: raycaster.intersectObject(subeDgroup)[0].object.name,
    });
  }

  if (
    raycaster.intersectObject(subePipeline).length > 0 &&
    statusCity.value == 9
  ) {
    // console.log(raycaster.intersectObject(subePipeline)[0].object.name);
    switch (raycaster.intersectObject(subePipeline)[0].object.name) {
      case "Pipeline1":
        popupId.value = "人孔-BF-N61";
        showPopup.value = true;
        break;
      case "Pipeline2":
        popupId.value = "人孔-DF-I82";
        showPopup.value = true;
        break;
      case "Pipeline3":
        popupId.value = "人孔-XF-R95";
        showPopup.value = true;
        break;
      case "Pipeline4":
        popupId.value = "人孔-NF-J56";
        showPopup.value = true;
        break;
      default:
        break;
    }
  }
  if (
    raycaster.intersectObject(sheXiangGroup).length > 0 &&
    statusCity.value == 10
  ) {
    // console.log(raycaster.intersectObject(subePipeline)[0].object.name);
    switch (raycaster.intersectObject(sheXiangGroup)[0].object.name) {
      case "Circle001":
        openMonitorPopup(monitorCards.value[0]);
        break;
      case "Circle002":
        openMonitorPopup(monitorCards.value[1]);
        break;
      case "Circle003":
        openMonitorPopup(monitorCards.value[2]);
        break;
      case "Circle004":
        openMonitorPopup(monitorCards.value[3]);
        break;
      case "Circle005":
        openMonitorPopup(monitorCards.value[4]);
        break;
      case "Circle006":
        openMonitorPopup(monitorCards.value[5]);
        break;
      case "Circle007":
        openMonitorPopup(monitorCards.value[6]);
        break;
      case "Circle008":
        openMonitorPopup(monitorCards.value[7]);
        break;
      default:
        break;
    }
  }
}
//高亮显示模型（呼吸灯）
function outlineObj() {
  composer = new EffectComposer(renderer);
  const renderPass = new RenderPass(scene, camera);
  composer.addPass(renderPass);
  // const gammaCorrectionShader = new ShaderPass(GammaCorrectionShader);
  // composer.addPass(gammaCorrectionShader);
  // 初始化 OutlinePass
  outlinePass = new OutlinePass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    scene,
    camera,
    []
  );
  outlinePass.edgeStrength = 5.0;
  outlinePass.edgeGlow = 7;
  outlinePass.edgeThickness = 3.0;
  outlinePass.pulsePeriod = 2;
  outlinePass.visibleEdgeColor.set(0x00ff00); // 默认红色
  outlinePass.hiddenEdgeColor.set(0x000000);
  outlinePass.clear = true; // 关闭清除，避免场景变暗
  composer.addPass(outlinePass);

  // 添加抗锯齿
  const effectFXAA = new ShaderPass(FXAAShader);
  effectFXAA.uniforms.resolution.value.set(
    1 / window.innerWidth,
    1 / window.innerHeight
  );
  effectFXAA.renderToScreen = true;

  composer.addPass(effectFXAA);
  // jifangLightTwo.visible = false
}
//添加高亮
function highlightObjectthree(objects) {
  // console.log(objects);
  objects[0].traverse((obj) => {
    if (obj.isMesh) {
      obj.material = obj.originalMaterialtwo;
      obj.material.opacity = 1;
    }
  });
}
//防抖
function debounce(fn, delay) {
  let timer = null;
  return function _debounce() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}
//页面适配
function onWindowResize() {
  let aspect = window.innerWidth / window.innerHeight;
  camera.aspect = aspect;
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.updateProjectionMatrix();
}
document.addEventListener("onmousmove", function () {
  // console.log("mousemove");
});
//监控
const showMonitorCards = ref(false); // 控制卡片列表是否显示
const monitorCards = ref([
  { name: "机柜1-1", image: "static/jk1.png" },
  { name: "机柜1-2", image: "static/jk2.png" },
  { name: "单元1101", image: "static/jk3.png" },
  { name: "核心交换机", image: "static/jk4.png" },
  { name: "光交箱-A01", image: "static/jk5.png" },
  { name: "配线架-B02", image: "static/jk6.png" },
  { name: "动力机房-D03", image: "static/jk7.png" },
  { name: "安全网关-S04", image: "static/jk8.png" },
]);

const showPopupCard = ref(false); // 控制弹窗是否显示
const currentPopupCard = ref(null); // 当前点击的卡片数据
const popupTime = ref(""); // 显示的时间

// 显示监控卡片列表（由 JianKong 调用）
function JianKong() {
  showMonitorCards.value = true;
  statusCity.value = 10;
}

// 打开弹窗
function openMonitorPopup(card) {
  console.log(card);

  currentPopupCard.value = card;
  popupTime.value = new Date().toLocaleString(); // 获取当前时间
  showPopupCard.value = true;
}

// 关闭弹窗
function closeMonitorPopup() {
  showPopupCard.value = false;
}
//自动巡检
const isXunJian = ref(false);
//巡检数据展示
const xunJianData = ref(false);
function xunJian() {
  isXunJian.value = true;
  xunJianData.value = true;
  onMouseEnter();
  //1.{x: -4.655864933882753, y: 3.9726, z: -6.174044481435548}
  //2.{x: -3.2232005654656275, y: 3.9726, z: -6.210419916767389}
  //3.{x: -3.2441577945444227, y: 3.9726, z: -7.581120433581445}
  //4.{x: -4.654632989129199, y: 3.9726, z: -7.567090266575179}
  TWEEN.removeAll();
  const tweenA = new TWEEN.Tween(camera.position);
  tweenA
    .to({ x: -4.655864933882753, y: 3.9726, z: -6.174044481435548 }, 3000)
    .onUpdate(() => {
      orbitControls.target.setY(3.9726);
    });
  tweenA.easing(TWEEN.Easing.Quadratic.Inout);
  const tweenB = new TWEEN.Tween(camera.position);
  tweenB.to({ x: -3.2232005654656275, y: 3.9726, z: -6.210419916767389 }, 8000);
  tweenB.easing(TWEEN.Easing.Quadratic.Inout);
  const tweenC = new TWEEN.Tween(camera.position);
  tweenC.to({ x: -3.2441577945444227, y: 3.9726, z: -7.581120433581445 }, 8000);
  tweenC.easing(TWEEN.Easing.Quadratic.Inout);
  const tweenD = new TWEEN.Tween(camera.position);
  tweenD.to({ x: -4.654632989129199, y: 3.9726, z: -7.567090266575179 }, 8000);
  tweenD.easing(TWEEN.Easing.Quadratic.Inout);
  const tweenE = new TWEEN.Tween(camera.position);
  tweenE.to({ x: -4.655864933882753, y: 3.9726, z: -6.174044481435548 }, 8000);
  tweenE.easing(TWEEN.Easing.Quadratic.Inout).onComplete(() => {
    isXunJian.value = false;
  });
  // tweenB.start();
  tweenA.chain(tweenB);
  tweenB.chain(tweenC);
  tweenC.chain(tweenD);
  tweenD.chain(tweenE);
  // tweenD.chain(tweenA);
  tweenA.start();
  // console.log("自动巡检");
}
let danQqian = 0;
//模型高亮
function highlightObject(object) {
  // 改颜色（保存原颜色到自定义属性）
  if (object.material) {
    object.originalColor = object.material.color.clone();
    object.material.color.set(0x9cdcfe); // 高亮颜色
    object.material.transparent = true; // 高亮颜色
    object.material.opacity = 0.8; // 高亮颜色
  }
}
//模型高亮2
function highlightObjectTwuo(object) {
  //主楼变暗
  exteriorWall.traverse((obj) => {
    if (obj.isMesh) {
      obj.material.opacity = 0.05; // 高亮颜色
      object.material.transparent = true; // 高亮颜色
      object.depthWrite = false;
    }
    if (obj.isLine) {
      object.material.transparent = true; // 高亮颜色
      obj.material.opacity = 0; // 高亮颜色
      obj.visible = false; // 高亮颜色
      // object.material.transparent = true // 高亮颜色
    }
  });
  lightFlow.visible = false;
}
// 恢复颜色
function restoreObject(object) {
  lightFlow.visible = true;
  if (object.material) {
    object.originalColor = object.material.color.clone();
    object.material.color.set(0x7cdcf0); // 高亮颜色
    object.material.transparent = true; // 高亮颜色
    object.material.opacity = 0.2; // 高亮颜色
  }
  exteriorWall.traverse((obj) => {
    if (obj.isMesh) {
      obj.material.opacity = 0.2; // 高亮颜色
      obj.material.transparent = true; // 高亮颜色
      obj.depthWrite = false;
    }
    if (obj.isLine) {
      obj.material.transparent = true; // 高亮颜色
      obj.material.opacity = 0.05; // 高亮颜色
      obj.visible = true; // 高亮颜色
      // object.material.transparent = true // 高亮颜色
    }
  });
}
function onmousemove(item, floorObjNum) {
  // console.log(item, floorObjNum);
  if (rightOpacity.value != 1) return;
  // console.log(camera.position);
  // console.log(item, floorObjNum, '移入');
  if (CurrentStatus.value) {
    return;
  }
  isShow.value = item;
  if (danQqian == 0 || danQqian != floorObjNum) {
    danQqian = floorObjNum;
    // console.log(floorObjNum, floorObj[floorObjNum], floorObj);
    if (cylinderMesh && floorObj[floorObjNum]) {
      floorObj[floorObjNum].traverse((obj) => {
        if (obj.isMesh) {
          if (floorObjNum == "LC05") {
            highlightObjectTwuo(obj);
          } else {
            highlightObject(obj);
            highlightObjectTwuo(obj);
          }
        }
      });
    }
    // console.log(floorObj);
    if (floorObjNum == "LC14") {
      computerGroup.visible = true;
    } else if (floorObjNum == "LC05") {
      guanwangGroup.visible = true;
    } else if (floorObjNum == "LC13") {
      thFloor13.visible = true;
    } else if (floorObjNum == "LC12") {
      thFloor12.visible = true;
    } else if (floorObjNum == "LC11") {
      thFloor11.visible = true;
    } else if (floorObjNum == "LC10") {
      thFloor10.visible = true;
    } else {
      computerGroup.visible = false;
      guanwangGroup.visible = false;
      thFloor13.visible = false;
      thFloor12.visible = false;
      thFloor11.visible = false;
      thFloor10.visible = false;
    }
  } else {
    // danQqianOld = danQqian
    return;
  }
}
function onmouseleave() {
  // console.log('移出');
  if (CurrentStatus.value) {
    return;
  }
  isShow.value = 0;
  danQqian = 0;
  if (cylinderMesh) {
    cylinderMesh.traverse((obj) => {
      if (obj.isMesh) {
        restoreObject(obj);
      }
    });
  }
  if (computerGroup) {
    computerGroup.visible = false;
  }
  if (guanwangGroup) {
    guanwangGroup.visible = false;
  }
  if (thFloor13) {
    thFloor13.visible = false;
  }
  if (thFloor12) {
    thFloor12.visible = false;
  }
  if (thFloor11) {
    thFloor11.visible = false;
  }
  if (thFloor10) {
    thFloor10.visible = false;
  }
}
//点击机房
function onClickFloor(floorName) {
  if (boxRed) {
    boxRed.visible = true;
  }
  //隐藏UI
  statusCity.value = 2;
  jifangLightTwo.intensity = 15;
  const floor = floorObj[floorName];
  //修改当前状态
  CurrentStatus.value = true;
  if (!floor) {
    console.warn(`未找到楼层对象：${floorName}`);
    return;
  }
  floorObj[floorName].traverse((obj) => {
    if (obj.material) {
      obj.originalColor = obj.material.color.clone();
      obj.material.color.set(0x7cdcf0); // 高亮颜色
      obj.material.transparent = true; // 高亮颜色
      obj.material.opacity = 0.2; // 高亮颜色
    }
  });
  // 获取模型包围盒中心点（世界坐标）
  const box = new THREE.Box3().setFromObject(floor);
  const center = new THREE.Vector3();
  box.getCenter(center);
  //     x: -3.5,x: -3.4,
  //     y: 4.5,y: 4.1,
  //     z: -5.7，z: -5.87
  // 转换为世界空间坐标
  const worldCenter = new THREE.Vector3();
  floor.getWorldPosition(worldCenter);
  ServerRoomView();
  // 使用 TWEEN 动画过渡相机位置
  TWEEN.removeAll();
  new TWEEN.Tween(camera.position)
    .to(
      {
        x: -3.7,
        y: 5.1,
        z: -5.8,
      },
      3000
    )
    .easing(TWEEN.Easing.Quadratic.InOut)
    // .easing(TWEEN.Easing.Sinusoidal.In)
    .start();
  // 更新 OrbitControls 的目标点
  new TWEEN.Tween(orbitControls.target)
    .to(
      {
        x: -3.7,
        y: 3.6,
        z: -6.76,
      },
      3000
    )
    .easing(TWEEN.Easing.Quadratic.InOut)
    .start();
  new TWEEN.Tween(nengHao1)
    .to(
      {
        value: 5,
      },
      2000
    )
    .easing(TWEEN.Easing.Quadratic.InOut)
    .onUpdate()
    .start();
  //主楼消失
  exteriorWall.visible = false;
  //其他楼层消失
  louCengXiaoshi(floorName);
  orbitControls.enableRotate = true;
  orbitControls.enableZoom = true;
  // box.visible = true;
}
//隐藏
function louCengXiaoshi(name) {
  cylinderMesh.traverse((obj) => {
    if (obj.type == "Object3D" && obj.name != name) {
      obj.visible = false;
    }
  });
  worldCity.visible = false;
  carGroup.visible = false;
}
//单独楼层还原
function louCengXiaoshione(name) {
  cylinderMesh.traverse((obj) => {
    if (obj.type == "Object3D" && obj.name == name) {
      obj.visible = true;
    }
  });
  worldCity.visible = false;
  carGroup.visible = false;
}
//显示
function louCengChuXian() {
  cylinderMesh.traverse((obj) => {
    if (obj.type == "Object3D") {
      obj.visible = true;
    }
  });
  worldCity.visible = true;
  carGroup.visible = true;
}
//返回
function goCity() {
  //关闭摄像头弹窗
  closeMonitorPopup();
  InspectionSwitches.value = false;
  currentPointIndex.value = 0;
  currentPopupData.value = null; // 当前弹窗数据
  xunJianData.value = false;
  if (isXunJian.value) {
    TWEEN.removeAll();
    //归位相机
    new TWEEN.Tween(camera.position)
      .to(
        {
          x: -3.7,
          y: 5.1,
          z: -5.8,
        },
        1000
      )
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onComplete(() => {
        isXunJian.value = false;
      })
      .start();
    new TWEEN.Tween(orbitControls.target)
      .to(
        {
          x: -3.7,
          y: 3.6,
          z: -6.76,
        },
        1000
      )
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onUpdate(() => {})
      .start();
    return;
  }
  DanYuanId.value = 0;
  showPopup.value = false;
  convertToTransparentMaterial(Rectangle);
  convertToTransparentMaterial(gruopJigui);
  subePipeline.visible = false;
  let arr = [8, 10, 11, 12];
  //返回机房层
  if (statusCity.value <= 7 && statusCity.value >= 5) {
    Rectangle.visible = true;
    gruopJigui.visible = true;
    onMouseLeave();
    statusCity.value = 4;
    subeDgroup.visible = false;
    //隐藏精灵图
    subegroup.visible = false;
    window.sprite.visible = false;
    //关闭发光效果
    composerStart = false;
    JiFangQita.visible = true;
    HideBox(true);
    // convertToTransparentMaterial(gruopJigui)
    louCengXiaoshione("LC14");
    // 使用 TWEEN 动画过渡相机位置
    new TWEEN.Tween(camera.position)
      .to(
        {
          x: -3.7,
          y: 5.1,
          z: -5.8,
        },
        3000
      )
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onComplete(() => {
        isXunJian.value = false;
      })
      .start();
    new TWEEN.Tween(orbitControls.target)
      .to(
        {
          x: -3.7,
          y: 3.6,
          z: -6.76,
        },
        3000
      )
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onUpdate(() => {})
      .start();
    orbitControls.enableRotate = true;
    orbitControls.enableZoom = true;
  } else if (statusCity.value > 2 && statusCity.value < 5) {
    statusCity.value = statusCity.value - 1;
  } else if (arr.includes(statusCity.value)) {
    // statusCity.value == 8
    statusCity.value = 2;
    Rectangle.visible = true;
    gruopJigui.visible = true;
  } else {
    Rectangle.visible = true;
    gruopJigui.visible = true;
    // box.visible = false;
    subeDgroup.visible = false;
    //隐藏精灵图
    subegroup.visible = false;
    window.sprite.visible = false;
    //关闭发光效果
    composerStart = false;
    //关闭灯光
    // jifangLightTwo.visible = false
    nengHao1.value = -100;
    nengHao2.value = -100;
    nengHao3.value = -100;
    statusCity.value = 1;
    CurrentStatus.value = false;
    louCengChuXian();
    // 使用 TWEEN 动画过渡相机位置
    new TWEEN.Tween(camera.position)
      .to(
        {
          x: -8.4,
          y: 4.5,
          z: -3.56,
        },
        3000
      )
      .easing(TWEEN.Easing.Quadratic.InOut)
      .start();
    // 更新 OrbitControls 的目标点
    new TWEEN.Tween(orbitControls.target)
      .to(
        {
          x: 0.27,
          y: 1.5,
          z: -4.95,
        },
        3000
      )
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onUpdate(() => {
        orbitControls.update();
      })
      .start()
      .onComplete(() => {
        console.log("动画完成");
        BuildingView();
      });

    isShow.value = 0;
    danQqian = 0;
    if (cylinderMesh) {
      cylinderMesh.traverse((obj) => {
        if (obj.isMesh) {
          restoreObject(obj);
        }
      });
    }
    convertToTransparentMaterial(gruopJigui);
    HideBox(true);
    orbitControls.enableZoom = false;
  }
}
//自动播放icon
const updateIconPlay = () => {
  const newValue = iconPlay.value.map(() => Math.floor(Math.random() * 2));
  iconPlay.value = newValue;
};
//控制器角度1（大楼视角）
function BuildingView() {
  orbitControls.enableRotate = true;
  orbitControls.enableDamping = true;
  orbitControls.dampingFactor = 0.05;
  orbitControls.minPolarAngle = THREE.MathUtils.degToRad(60);
  orbitControls.maxPolarAngle = THREE.MathUtils.degToRad(80);
  orbitControls.minAzimuthAngle = THREE.MathUtils.degToRad(240);
  orbitControls.maxAzimuthAngle = THREE.MathUtils.degToRad(290);
}
//(机房视角)
function ServerRoomView() {
  orbitControls.enableRotate = false;
  orbitControls.enableDamping = false;
  orbitControls.minPolarAngle = -Infinity;
  orbitControls.maxPolarAngle = Infinity;
  orbitControls.minAzimuthAngle = -Infinity;
  orbitControls.maxAzimuthAngle = Infinity;
}
//还原材质
function restoreOriginalMaterial(obj) {
  obj.traverse((object) => {
    if (object.isMesh && object.originalMaterial) {
      object.material = object.originalMaterial; // 还原原始材质
    }
  });
}
//转换透明材质
function convertToTransparentMaterial(obj) {
  JiFangQita.visible = true;
  obj.traverse((object) => {
    if (object.isMesh) {
      // const originalMaterial = object.material; // 保存原始材质
      object.material = new THREE.MeshBasicMaterial({
        color: "#7cdcf0",
        transparent: true,
        opacity: 0.2,
        depthWrite: false,
      });
    }
  });
}
function statusClass(status) {
  return {
    "status-normal": status === "正常",
    "status-warning": status === "警告",
    "status-critical": status === "严重",
  };
}
//点击矩阵
const selectedServerInfo = ref(null);
function handleNodeSelected(obj) {
  orbitControls.enableRotate = false;
  orbitControls.enableZoom = false;
  //开启灯光
  // jifangLightTwo.visible = false
  statusCity.value = 5;
  console.log("选中的节点ID:", obj);
  if (obj.id == 1) {
    selectedServerInfo.value = {
      name: "矩阵-01",
      totalSlots: 8,
      usedSlots: 5,
      freeSlots: 3,
      cpuUsage: 60,
      memoryUsage: 70,
      diskUsage: 900,
      networkUsage: 150,
      uptime: "2年3个月",
      model: "Dell R750",
      ipAddress: "192.168.1.101",
      status: "正常",
    };
    subeDgroup.visible = false;
    subegroup.visible = true;
    window.sprite.visible = true;
    composerStart = false;
    console.log("跳转机房");
    TWEEN.removeAll();
    const tweenA = new TWEEN.Tween(targetPosition);
    tweenA.to({ x: -4.44, y: 3.99, z: -6.47 }, 2000).onUpdate(() => {});
    tweenA.easing(TWEEN.Easing.Quadratic.Inout);
    const tweenB = new TWEEN.Tween(camera.position);
    tweenB.to({ x: -4.45, y: 3.98, z: -6.08 }, 2000);
    tweenB.easing(TWEEN.Easing.Quadratic.Inout);
    tweenA.start();
    tweenB.start();
    // orbitControls.enableDamping = true;
    // orbitControls.enableRotate = true;
    // orbitControls.enableZoom = true;
    // orbitControls.enablePan = true;
    //材质还原
    restoreOriginalMaterial(gruopJigui);
    //隐藏机房
    JiFangQita.visible = false;
    //其他楼层消失
    louCengXiaoshi();
    HideBox(true);
    //组1587是第一个矩阵
  } else if (obj.id == "101") {
    clickJigui();
  } else if (obj.id == "1101") {
    clickDanyuan(obj.id);
  } else if (obj.id == "1102") {
    clickDanyuan(obj.id);
  } else if (obj.id == "1103") {
    clickDanyuan(obj.id);
  } else if (obj.id == "1104") {
    clickDanyuan(obj.id);
  } else if (obj.id == "1105") {
    clickDanyuan(obj.id);
  } else if (obj.id == "1106") {
    clickDanyuan(obj.id);
  } else if (obj.id == "1107") {
    clickDanyuan(obj.id);
  } else if (obj.id == "1108") {
    clickDanyuan(obj.id);
  } else if (obj.id == 2) {
    selectedServerInfo.value = {
      name: "Matrix-02",
      totalSlots: 8,
      usedSlots: 3,
      freeSlots: 5,
      cpuUsage: 30,
      memoryUsage: 40,
      diskUsage: 500,
      networkUsage: 100,
      uptime: "1年2个月",
      model: "HP DL380",
      ipAddress: "192.168.1.102",
      status: "警告",
    };
  } else if (obj.id == 3) {
    selectedServerInfo.value = {
      name: "Matrix-03",
      totalSlots: 8,
      usedSlots: 7,
      freeSlots: 1,
      cpuUsage: 90,
      memoryUsage: 85,
      diskUsage: 1200,
      networkUsage: 200,
      uptime: "3年1个月",
      model: "Lenovo SR650",
      ipAddress: "192.168.1.103",
      status: "严重",
    };
  } else if (obj.id == 4) {
    selectedServerInfo.value = {
      name: "Matrix-04",
      totalSlots: 8,
      usedSlots: 2,
      freeSlots: 6,
      cpuUsage: 15,
      memoryUsage: 25,
      diskUsage: 600,
      networkUsage: 80,
      uptime: "6个月",
      model: "Huawei RH2288H",
      ipAddress: "192.168.1.104",
      status: "正常",
    };
  } else if (obj.id == 5) {
    selectedServerInfo.value = {
      name: "Matrix-05",
      totalSlots: 8,
      usedSlots: 4,
      freeSlots: 4,
      cpuUsage: 50,
      memoryUsage: 60,
      diskUsage: 800,
      networkUsage: 120,
      uptime: "1年6个月",
      model: "IBM Power System",
      ipAddress: "192.168.1.105",
      status: "正常",
    };
  } else if (obj.id == 6) {
    selectedServerInfo.value = {
      name: "Matrix-06",
      totalSlots: 8,
      usedSlots: 6,
      freeSlots: 2,
      cpuUsage: 75,
      memoryUsage: 80,
      diskUsage: 1000,
      networkUsage: 180,
      uptime: "2年1个月",
      model: "Supermicro X11DPi-N",
      ipAddress: "192.168.1.106",
      status: "警告",
    };
  } else if (obj.id == 7) {
    selectedServerInfo.value = {
      name: "Matrix-07",
      totalSlots: 8,
      usedSlots: 1,
      freeSlots: 7,
      cpuUsage: 10,
      memoryUsage: 20,
      diskUsage: 400,
      networkUsage: 60,
      uptime: "3个月",
      model: "Cisco UCS C220 M5",
      ipAddress: "192.168.1.107",
      status: "正常",
    };
  } else if (obj.id == 8) {
    selectedServerInfo.value = {
      name: "Matrix-08",
      totalSlots: 8,
      usedSlots: 5,
      freeSlots: 3,
      cpuUsage: 65,
      memoryUsage: 75,
      diskUsage: 1024,
      networkUsage: 130,
      uptime: "1年8个月",
      model: "Dell R640",
      ipAddress: "192.168.1.108",
      status: "警告",
    };
  } else if (obj.id == 9) {
    selectedServerInfo.value = {
      name: "Matrix-09",
      totalSlots: 8,
      usedSlots: 8,
      freeSlots: 0,
      cpuUsage: 95,
      memoryUsage: 90,
      diskUsage: 1500,
      networkUsage: 200,
      uptime: "4年",
      model: "Lenovo SR630",
      ipAddress: "192.168.1.109",
      status: "严重",
    };
  } else if (obj.id == 10) {
    selectedServerInfo.value = {
      name: "Matrix-10",
      totalSlots: 8,
      usedSlots: 0,
      freeSlots: 8,
      cpuUsage: 5,
      memoryUsage: 10,
      diskUsage: 256,
      networkUsage: 30,
      uptime: "刚上线",
      model: "HP ProLiant",
      ipAddress: "192.168.1.110",
      status: "正常",
    };
  } else {
    console.log("未知设备");
    selectedServerInfo.value = null;
  }
}
//点击机柜
function clickJigui() {
  orbitControls.enableRotate = false;
  orbitControls.enableZoom = false;
  //精灵图
  subeDgroup.visible = true;
  window.sprite.visible = true;
  subegroup.visible = false;
  composerStart = false;
  if (statusCity.value == 4 || statusCity.value == 5 || statusCity.value == 6) {
    restoreOriginalMaterial(gruopJigui);
    //隐藏机房
    JiFangQita.visible = false;
    //其他楼层消失
    louCengXiaoshi();
    HideBox(true);
  }
  statusCity.value = 6;
  TWEEN.removeAll();
  const tweenA = new TWEEN.Tween(targetPosition);
  tweenA.to({ x: -4.55, y: 3.985, z: -6.47 }, 1000).onUpdate(() => {});
  tweenA.easing(TWEEN.Easing.Quadratic.Inout);
  const tweenB = new TWEEN.Tween(camera.position);
  tweenB.to({ x: -4.55, y: 3.985, z: -6.14 }, 1000);
  tweenB.easing(TWEEN.Easing.Quadratic.Inout);
  tweenA.start();
  tweenB.start();
  HideBox(false);
}
const DanYuanId = ref(0);
//点击单元
function clickDanyuan(id) {
  orbitControls.enableRotate = false;
  orbitControls.enableZoom = false;
  clickJigui();
  subegroup.visible = false;
  window.sprite.visible = true;
  composerStart = false;
  // clickJigui()
  if (id == 1101) {
    DanYuanId.value = 1101;
    // jifangLightTwo.visible = true
    highlightObjectthree([FWQOO1], 0xff0000);
  } else if (id == 1102) {
    DanYuanId.value = 1102;
    highlightObjectthree([FWQOO2], 0x00ff00);
  } else if (id == 1103) {
    DanYuanId.value = 1103;
    highlightObjectthree([FWQOO3], 0xff0000);
  } else if (id == 1104) {
    DanYuanId.value = 1104;
    highlightObjectthree([FWQOO4], 0x00ff00);
  } else if (id == 1105) {
    DanYuanId.value = 1105;
    highlightObjectthree([FWQOO5], 0xff0000);
  } else if (id == 1106) {
    DanYuanId.value = 1106;
    highlightObjectthree([FWQOO6], 0xff0000);
  } else if (id == 1107) {
    DanYuanId.value = 1107;
    highlightObjectthree([FWQOO7], 0x00ff00);
  } else if (id == 1108) {
    DanYuanId.value = 1108;
    highlightObjectthree([FWQOO8], 0xff0000);
  }
  console.log(id);
  // FWQOOQ.traverse((object) => {
  //   if (object.isMesh) {
  //     // const originalMaterial = object.material; // 保存原始材质
  //   }
  // })
  statusCity.value = 7;
}
function HideBox(statics) {
  gruopJigui.traverse((obj) => {
    // 如果是 JG001 或其子对象，跳过隐藏
    if (obj.name == "Box2172") {
      obj.visible = statics;
    }
  });
}
//点击拓补
function setShowAtom() {
  showAtom.value = true;
}
//点击管网
function clickGuanwang() {
  subePipeline.visible = true;
  statusCity.value = 9;
  jifangLightTwo.intensity = 15;
  const floor = floorObj["LC05"];
  CurrentStatus.value = true;
  if (!floor) {
    console.warn(`未找到楼层对象：${"LC05"}`);
    return;
  }
  floorObj["LC05"].traverse((obj) => {
    if (obj.material) {
      obj.originalColor = obj.material.color.clone();
      obj.material.color.set(0x7cdcf0); // 高亮颜色
      obj.material.transparent = true; // 高亮颜色
      obj.material.opacity = 0.2; // 高亮颜色
    }
  });
  // console.log(camera.position, orbitControls.target);
  // console.log('管网');
  // orbitControls.enableDamping = true;
  // orbitControls.enableRotate = true;
  // orbitControls.enableZoom = true;
  // orbitControls.enablePan = true;
  TWEEN.removeAll();
  new TWEEN.Tween(camera.position)
    .to(
      {
        x: -7.051,
        y: 1.976,
        z: -3.778,
      },
      3000
    )
    .easing(TWEEN.Easing.Quadratic.InOut)
    // .easing(TWEEN.Easing.Sinusoidal.In)
    .start();
  // 更新 OrbitControls 的目标点
  new TWEEN.Tween(orbitControls.target)
    .to(
      {
        x: -1.108,
        y: -1.613,
        z: -5.607,
      },
      3000
    )
    .easing(TWEEN.Easing.Quadratic.InOut)
    .start();

  //黄
  //{x: -6.298, y: 0, z: -6.896}
  //红
  //{x: -3.820, y: 0, z: -2.600}
  //蓝
  //{x: -3.836, y: 0, z: -9.937}
  //绿
  //{x: -1.547, y: 0, z: -7.026}
}
//页面适配
window.addEventListener("resize", debounce(onWindowResize, 200));
let intervalId;
onMounted(() => {
  console.log("初始化 Three.js");
  init();
  initAtom("atom");
  intervalId = setInterval(updateIconPlay, 2000);
});
onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<style scoped lang="less">
//引入less文件
@import "./index.less";
</style>
